For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

OHLC Chart

Animated open-high-low-close bars for dense financial data.

ChartGPUPixiJS
PixiJS renderer

Installation

$ pnpm dlx shadcn@latest add @chartcn/pixijs/ohlc-chart

Usage

import { ChartcnOhlcChart } from "@/components/chart/pixijs/ohlc-chart";
<ChartcnOhlcChart config={chartConfig} data={data}>
  <ChartcnOhlcChart.Grid />
  <ChartcnOhlcChart.XAxis />
  <ChartcnOhlcChart.YAxis />
  <ChartcnOhlcChart.Legend />
  <ChartcnOhlcChart.Tooltip />
  <ChartcnOhlcChart.Ohlc barWidth="58%" stemWidth={1.5} />
</ChartcnOhlcChart>

API Reference

Ohlc

PropTypeDefault
barWidthnumber | string-
stemWidthnumber1
tickLengthnumber | string"45%"