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
ChartGPU renderer

Installation

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

Usage

import { ChartcnCandlestickChart } from "@/components/chart/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

PropTypeDefault
datareadonly OHLCDataPoint[]-
configChartConfig-
animationboolean | AnimationConfig{ duration: 700, easing: "cubicOut" }
isLoadingbooleanfalse

Candlestick

PropTypeDefault
barWidthnumber | string-
style"classic" | "hollow""classic"
priceLabelboolean | CandlestickPriceLabelConfigChartGPU default