BarChart

Charts

An SVG bar chart with grouped multi-series, grid, hover tooltips, optional value labels, and a legend.

Props

Prop	Type	Default	Description
`labels`*	`string[]`	`–`	X-axis labels.
`datasets`*	`DsBarChartDataset[]`	`–`	Each dataset: { label, data, color? }.
`showGrid`	`boolean`	`true`	Horizontal grid lines.
`showValues`	`boolean`	`false`	Display value above each bar.
`showLegend`	`boolean`	`true`	Legend for multiple datasets.
`grouped`	`boolean`	`true`	Group datasets side by side.
`height`	`number`	`240`	Chart height.

Examples

Grouped bars

2024

2025

vue

<DsBarChart
  :labels="['Q1', 'Q2', 'Q3', 'Q4']"
  :datasets="[
    { label: '2024', data: [42000, 58000, 51000, 73000] },
    { label: '2025', data: [54000, 67000, 62000, 89000] },
  ]"
  :show-grid="true"
  :show-values="false"
/>

With value labels

vue

<DsBarChart
  :labels="['Q1', 'Q2', 'Q3', 'Q4']"
  :datasets="[
    { label: '2024', data: [42000, 58000, 51000, 73000] },
    { label: '2025', data: [54000, 67000, 62000, 89000] },
  ]"
  :show-grid="true"
  :show-values="false"
/>

Skeleton

Use DsBarChartSkeleton as a loading placeholder while content is being fetched.

Default (6 bars)

vue

<DsBarChartSkeleton
  :bars="6"
  :height="240"
/>

Accessibility

Hover tooltip shows exact values for screen content.

AreaChart

DonutChart