Financial charts
OHLC & HLC bars
Open-high-low-close bars with tick marks, and HLC bars.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { OHLCSeries } 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 OHLCBars() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={daily} theme={theme} barSpacing={9}>
<Pane>
<Grid />
<OHLCSeries name="MSFT" />
<YAxis />
<Legend title="MSFT · Bars" />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Usage
<OHLCSeries />Each bar is a vertical high-low line with a left tick at the open and a right tick at the close. Lines grow thicker as
you zoom in (thickness="auto"); set a fixed thickness in pixels to override.
HLC bars
hlc drops the open tick. Combine it with a static color for a neutral look.