Compare categories with bars, columns, or stacked series.
import { BarChart } from '@vrum/ui';
<BarChart
title={"Project delivery"}
description={"Work completed across the workspace"}
categories={["Jan","Feb","Mar","Apr","May","Jun"]}
series={[{"name":"Completed","data":[24,38,32,48,56,65]},{"name":"In progress","data":[18,22,25,20,28,24]}]}
height={300}
width={600}
showLegend={true}
showDataTable={false}
orientation={"vertical"}
stacked={false}
percentage={false}
/>| Prop | Type | Default | Description |
|---|---|---|---|
categories* | string[] | none | Ordered category labels. |
series* | ChartSeries[] | none | Named data series; each data array follows category order. |
orientation | "horizontal" | "vertical" | "vertical" | Layout direction. |
stacked | boolean | false | stacked configuration. |
percentage | boolean | false | percentage configuration. |
title | string | none | Heading shown above the content. |
description | string | none | Supporting text. |
width | number | 600 | Width used for the SVG viewBox. |
height | number | 300 | Height of the component in pixels. |
className | string | none | Additional CSS classes. |
colors | string[] | chartPalette | colors configuration. |
showLegend | boolean | none | Display series or category labels. |
showDataTable | boolean | none | Expand the accessible data table. |
onPointClick | ((point: ChartPoint) => void) | none | Called when a chart point is activated with a pointer or keyboard. |
valueFormat | ((value: number) => string) | String | value format configuration. |
Work completed across the workspace
| Category | Completed | In progress |
|---|---|---|
| Jan | 24 | 18 |
| Feb | 38 | 22 |
| Mar | 32 | 25 |
| Apr | 48 | 20 |
| May | 56 | 28 |
| Jun | 65 | 24 |