Charts

Bar chart

Columns that grow out of the baseline on a spring — grouped or stacked, thin with rounded caps, separated by 2px of air. Hover a category to lift it.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { BarChart } from '@vizzele/react';

<BarChart
  title="Signups by channel"
  data={rows}
  index="week"
  series={[
    { key: 'organic', label: 'Organic' },
    { key: 'paid', label: 'Paid' },
  ]}
  stacked
/>

Props

Prop	Type	Default	Description
`data`	`ChartRow[]`	—	One object per x position.
`index`	`string`	—	Key holding the x value (category or date).
`series`	`ChartSeries[]`	—	{ key, label?, color? } — up to five, colored in the palette’s fixed order (never cycled).
`title`	`string`	—	Accessible name and caption of the data table.
`height`	`number`	`260`	Plot height in px.
`valueFormatter`	`(v: number) => string`	`compact`	Formats ticks, labels, tooltip and table (1,284 / 12.9K).
`xFormatter`	`(x) => string`	—	Formats the x labels.
`legend`	`boolean`	`≥ 2 series`	Show the legend.
`yMax`	`number`	—	Fix the top of the y scale.
`stacked`	`boolean`	`false`	Stack instead of grouping side by side.
`valueLabels`	`boolean`	`true`	Value on each cap (single series, when there is room).

Usage

Props

Accessibility