Chart

bo-chart renders common line, area, bar, pie, and donut charts without a charting runtime dependency. It uses responsive SVG and keeps the data model consistent across chart types.

Line and Area

Pass category names through labels and one or more named series through series. Area charts use the same data model as line charts.

Monthly revenue

• Revenue

line chart with 1 series and 4 categories.

<bo-chart>
  type="line"
  :labels="['Jan', 'Feb', 'Mar', 'Apr']"
  :series="[{ name: 'Revenue', data: [18, 26, 22, 34] }]"
  title="Monthly revenue"
/>

Quarterly comparison

• Current year
• Previous year

bar chart with 2 series and 4 categories.

<bo-chart>
  type="bar"
  :labels="['Q1', 'Q2', 'Q3', 'Q4']"
  :series="[
    { name: 'Current year', data: [42, 58, 64, 78] },
    { name: 'Previous year', data: [36, 49, 57, 63] }
  ]"
  title="Quarterly comparison"
/>

Pie and Donut

Pie and donut charts use the first series and map each value to the corresponding label. Use them for part-to-whole relationships with a small number of categories.

Traffic sources

• Desktop
• Mobile
• Tablet

donut chart with 3 segments.

<bo-chart>
  type="donut"
  :labels="['Desktop', 'Mobile', 'Tablet']"
  :series="[{ name: 'Traffic', data: [58, 32, 10] }]"
  title="Traffic sources"
/>

Accessibility

The chart has an image role, an accessible label, and a visually hidden summary. Keep aria-label specific when the chart title does not fully describe the data. Legends are visual support; include the important values in nearby text when exact values matter.

API Reference

Props

Prop	Type	Default	Description
id	string	Autogenerated	Root element id.
dataTestId	string	Autogenerated	Test id attribute.
type	'line' | 'area' | 'bar' | 'pie' | 'donut'	'line'	Visualization type.
title	string	-	Optional visible chart title.
labels	string[]	[]	Category labels.
series	BoChartSeries[]	[]	Named numeric series.
height	number	320	SVG height in pixels, with a minimum of 180.
showLegend	boolean	true	Shows the visual legend.
showGrid	boolean	true	Shows Cartesian grid lines.
stacked	boolean	false	Stacks bar series instead of grouping them.
ariaLabel	string	Chart type	Accessible name override.

Series

interface BoChartSeries {
	name: string;
	data: number[];
	color?: string;
}