CandlestickChart

Live preview

Loading example…

Open-high-low-close candles with up and down tokens, optional volume bars on the same x axis, a last-price line and a brush to zoom. Arrow keys walk the candles; the tooltip reads open, high, low, close, change and volume.

Import

import { CandlestickChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/candlestick-chart.

Usage

<CandlestickChart
  title="Precio semanal de la pomada (S/ por unidad)"
  data={insumo}
  valueFormat="currency"
  volumeFormat="integer"
  height={380}
  candleStyle="filled"
  brush={false}
  lastPrice
  grid
  legend
  tooltip
  loading={false}
  animate
  texts={spanishTexts}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`data` *	`readonly Candle[]`
`title` *	`string`		Accessible name of the chart.
`description`	`string`
`height`	`number \| "fill"`	`360`	Height of the plot (price and volume), 360 by default.
`aspectRatio`	`number`		Width / height ratio; sizes the chart from the container width.
`volume`	`boolean`		Volume bars below the price, sharing the x axis. Default: shown when any candle has a volume.
`candleStyle`	`"filled" \| "hollow"`	`"filled"`	“filled” paints every body; “hollow” leaves rising candles empty.
`brush`	`boolean`	`false`	Overview with a draggable view to zoom the x axis.
`lastPrice`	`boolean`	`true`	Dashed line and tag at the last close (default true).
`valueFormat`	`ValueFormat`
`volumeFormat`	`ValueFormat`	`"compact"`
`xFormat`	`((value: XValue) => string)`
`upColor`	`string`	`DIRECTION_COLORS.up`	Overrides the rising color (default the `chart-up` token).
`downColor`	`string`	`DIRECTION_COLORS.down`	Overrides the falling color (default the `chart-down` token).
`grid`	`boolean`	`true`
`legend`	`boolean`	`true`
`tooltip`	`boolean`	`true`
`loading`	`boolean`
`animate`	`boolean`	`true`
`texts`	`Partial<CandlestickTexts>`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/candlestick-chart/candlestick-chart.tsx