Component
BarChart
Bars, vertical or horizontal, side by side or stacked.
import { BarChart } from '@loidolt/theme-charts';
Example
Bar chart of 3 series over 4 categories, Jan to Apr. Birch ply rises, from a low of 42 in Jan to a high of 92 in 11; Cork rises, from a low of 18 in Jan to a high of 41 in 11; Acrylic rises, from a low of 10 in Feb to a high of 26 in 12.
| Category | Birch ply | Cork | Acrylic |
|---|---|---|---|
| Jan | 42 | 18 | 12 |
| Feb | 48 | 22 | 10 |
| Mar | 51 | 20 | 14 |
| Apr | 63 | 25 | 13 |
Bar chart of 1 series over 5 categories, Birch ply to Card. Sheets falls, from a low of 88 in Card to a high of 812 in Birch ply.
| Material | Sheets |
|---|---|
| Birch ply | 812 |
| Cork | 351 |
| Acrylic | 212 |
| MDF | 140 |
| Card | 88 |
Notes
- Horizontal bars suit long category names and read top-down in data order.
decaladds a pattern to each series, so a reader never has to tell series apart by colour alone.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
data required | CategoryData | — | Categories and a series of values for each. |
categoryLabel | string | 'Category' | Heading of the first column in the data table. |
Plus the attributes of Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>andBarOptions, forwarded to the root element.