Open, high, low and close of each period, the usual chart for prices. Each candle has a body from the open to the close, and a thin line from the lowest to the highest value.
Charts need Recharts. Install it once with
yarn add recharts, then import from@bolio-ui/core/charts. The package stays out of your bundle until you use a chart.
Each row needs open, high, low and close. A rise has a hollow body and a fall has a solid one, so the direction does not rest on color alone.
Use dataKeys when your rows name the values differently, labels to translate the tooltip, and upColor and downColor to pick the colors.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | one row per period | Array<Record<string, ...>> | - | - |
| dataKey | key of data that holds the x axis label | string | - | - |
| dataKeys | keys of the four values, when they are not the default names | { open, high, low, close } | - | open, high, low, close |
| height | height of the chart, in pixels | number | - | 300 |
| upColor | color of a period that closed at or above the open | string | - | theme success |
| downColor | color of a period that closed below the open | string | - | theme error |
| withTooltip | show the four values on hover and focus | boolean | - | true |
| withXAxis | show the x axis | boolean | - | true |
| withYAxis | show the y axis | boolean | - | true |
| withGrid | show the horizontal grid lines | boolean | - | true |
| labels | names of the four values in the tooltip | { open, high, low, close } | - | Open, High, Low, Close |
| valueFormatter | how a number is written | (value: number) => string | - | thousands separators, en-US |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
The ref points at the root div.
Name the chart with aria-label, or with aria-labelledby pointing at a heading. A named chart becomes a group. The chart can be focused. Arrow Left and Right then move through the data and show the values in the tooltip. The tooltip lists the open, high, low and close of the period.
A price chart carries many numbers, so offer the same data in a Table for anyone who needs the exact values.