Financial charts
Baseline
A line with different colors and fills above and below a base value.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { BaselineSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Legend } from "@reincharts/tooltip";
import { daily } from "@/lib/data";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function BaselineExample() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={daily} theme={theme} barSpacing={4}>
<Pane>
<Grid />
{/* green above 55, red below */}
<BaselineSeries name="MSFT" base={55} />
<YAxis />
<Legend title="MSFT · Baseline 55" />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Usage
<BaselineSeries base={55} />Values above base use topColor (theme up), values below use bottomColor (theme down). Without base the
series uses the price at the vertical middle of the pane, so the split follows
panning and zooming.