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

Candlestick Chart

Animated financial charts for open, high, low, and close data.

ChartGPUPixiJS
PixiJS renderer

Installation

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

Usage

import { ChartcnCandlestickChart } from "@/components/chart/pixijs/candlestick-chart";
<ChartcnCandlestickChart config={chartConfig} data={data}>
  <ChartcnCandlestickChart.Grid />
  <ChartcnCandlestickChart.XAxis />
  <ChartcnCandlestickChart.YAxis />
  <ChartcnCandlestickChart.Legend />
  <ChartcnCandlestickChart.Tooltip />
  <ChartcnCandlestickChart.Candlestick barWidth="58%" />
</ChartcnCandlestickChart>

Examples

Hollow candles

style='hollow'

API Reference

Candlestick

PropTypeDefault
barWidthnumber | string"58%"
style"classic" | "hollow""classic"