Component
CandlestickChart
Open, high, low and close per period, with optional volume and zoom.
import { CandlestickChart } from '@loidolt/theme-charts';
Example
Candlestick chart of 8 periods, Mar 3 to Mar 12. Opened at $20.10 and closed at $23.80 (+18.4%), trading between $19.80 and $24.60.
| Date | Open | High | Low | Close | Volume |
|---|---|---|---|---|---|
| Mar 3 | $20.10 | $21.90 | $19.80 | $21.40 | $1,200.00 |
| Mar 4 | $21.40 | $22.00 | $20.50 | $20.90 | $980.00 |
| Mar 5 | $20.90 | $23.10 | $20.70 | $22.60 | $1,540.00 |
| Mar 6 | $22.60 | $22.90 | $21.70 | $22.10 | $870.00 |
| Mar 7 | $22.10 | $23.80 | $22.00 | $23.50 | $1,320.00 |
| Mar 10 | $23.50 | $24.00 | $22.60 | $23.00 | $1,010.00 |
| Mar 11 | $23.00 | $24.60 | $22.90 | $24.20 | $1,480.00 |
| Mar 12 | $24.20 | $24.50 | $23.40 | $23.80 | $900.00 |
Notes
- Rises and falls take the gain and loss tokens; pass
upColoranddownColorfor markets that use the opposite convention.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
data required | CandlestickDatum[] | — | One open, high, low and close per period, optionally with volume. |
tableLabels | { dateLabel?: string; openLabel?: string; highLabel?: string; lowLabel?: string; closeLabel?: string; volumeLabel?: string; } | {} | Headings of the data table columns. |
Plus the attributes of Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>andCandlestickOptions, forwarded to the root element.