Price lines
Last-value labels, price lines, edge indicators and current-coordinate dots.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { LineSeries } from "@reincharts/series";
import { MovingAverage } from "@reincharts/indicators";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair, CurrentCoordinate, EdgeIndicator, LastValueLabel, PriceLine } from "@reincharts/coordinates";
import { daily } from "@/lib/data";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function PriceLines() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={daily} theme={theme} barSpacing={6}>
<Pane>
<Grid />
<LineSeries name="MSFT" y="close" />
<MovingAverage type="ema" period={50} color="#f59e0b" />
{/* fixed prices with titles */}
<PriceLine price={62} title="Target" color="#10b981" />
<PriceLine price={56} title="Stop" color="#ef4444" />
{/* last value of every series on the axis, with a dotted line */}
<LastValueLabel line />
{/* first visible close, on the left edge */}
<EdgeIndicator y="close" item="first" color="#a1a1aa" />
{/* dot on the hovered value */}
<CurrentCoordinate y="close" />
<YAxis />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Last value
<LastValueLabel> shows the last value of every series in the pane as a colored label on the price axis. Add line (or use <LastValueLine>) to draw a dotted line across the plot, and showName to show the
series name. Filter which series get a label with filter.
<Pane>
<CandlestickSeries />
<LastValueLabel line />
<YAxis />
</Pane>Price lines
<PriceLine price={...}> draws a horizontal line at a fixed price with an axis label and an optional title: targets,
stops, alerts, average entry price.
<PriceLine price={62} title="Target" color="#10b981" />Edge indicator
<EdgeIndicator y="close"> labels the value of the first or last visible datum, for any accessor.
Current coordinate
<CurrentCoordinate y="close"> draws a dot on a series at the crosshair position.