# CandlestickChart

> 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.

Source: https://ui.jcsoftdev.com/docs/components/candlestick-chart

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

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/charts-candlestickchart--default)
- [Brush Zoom](/storybook/?path=/story/charts-candlestickchart--brush-zoom)
- [Hollow](/storybook/?path=/story/charts-candlestickchart--hollow)
- [With Volume](/storybook/?path=/story/charts-candlestickchart--with-volume)
- [Price Only](/storybook/?path=/story/charts-candlestickchart--price-only)
- [Daily Cash](/storybook/?path=/story/charts-candlestickchart--daily-cash)
- [Loading](/storybook/?path=/story/charts-candlestickchart--loading)
- [Empty](/storybook/?path=/story/charts-candlestickchart--empty)
- [Narrow](/storybook/?path=/story/charts-candlestickchart--narrow)

## Source

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