Candlestick Chart Examples
6 candlestick charts: daily and weekly candles, theme colors, a range selector, a crosshair that follows direction and striped bodies. Each on React, Vue, Svelte and Solid, drawn with TanStack Charts in your theme. Candlestick chart docs and API.
Every candlestick chart example
6 examples.
- Candlestick ChartCandlestick chartA month of daily candles, the rest fading while you hover one to read its prices.
- Minimal Candlestick ChartCandlestick chartOnly the candles and a date axis: no grid, no price labels, a fixed 320 px height.
- Candlestick Chart with Custom ColorsCandlestick chartWeekly candles in `--chart-2` and `--chart-5` instead of green and red, 18 px wide.
- Candlestick Chart with a Range SelectorCandlestick chartButtons narrow three months of candles to the last 30 or 14 days through `xDomain`.
- Candlestick Chart with a Matching CrosshairCandlestick chartGradient candles, and a crosshair that turns green or red with the candle under it.
- Candlestick Chart with Striped BodiesCandlestick chartDiagonal stripes over each body, framed by a thin line in the candle's own color.
Or describe it. With Pro, your AI agent installs the candlestick chart example you describe, on your framework.
Get ProGalleries
More chart examples
8 more chart types, free: open one for its examples and their code.
Pricing
Candlestick Chart examples MCP, with Pro
Your AI agent installs any of the 1434 examples, and every component, block and icon, with every Pro plan.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
6: Candlestick Chart, Minimal Candlestick Chart, Candlestick Chart with Custom Colors, Candlestick Chart with a Range Selector, Candlestick Chart with a Matching Crosshair and Candlestick Chart with Striped Bodies. Each page has the live chart, its code and a one-line install.
Signed in, copy the chart's command: `npx shadcn@latest add` with its URL. It adds the chart to `components/charts`, the `chart-kit` kit every chart imports, and `@tanstack/charts`. Import the chart and render it.
Yes. Every chart is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub. Pro is the site's paid plan for blocks, the Pro collections and the MCP, and the charts don't need it.
4.9 out of 5 from 150+ developers
Every candlestick chart example. One prompt away.
Every candlestick chart example is free with an account. With Pro, your AI agent installs them from a prompt.
Get Pro