BarChart

The <BarChart> primitive draws a vertical bar chart from an array of labeled values. Use it for statistics, comparisons, and any data-driven visualization.

0.00s / 1.97s · F0

Props

Prop	Type	Default	Description
`bars`	`{ label: string, value: number, color?: string }[]`	—	Array of bar definitions
`x`	`number`	`0`	X position of the chart
`y`	`number`	`0`	Y position of the chart
`width`	`number`	`400`	Total chart width in pixels
`height`	`number`	`250`	Total chart height in pixels
`barColor`	`string`	`'#4f46e5'`	Default fill color for bars
`labelColor`	`string`	`'currentColor'`	Color of bar labels
`showValues`	`boolean`	`true`	Display the value above each bar
`valueFormat`	`'number' \| 'percent'`	`'number'`	Format values as plain numbers or percentages
`maxValue`	`number`	`undefined`	Override the automatic y-axis maximum
`gap`	`number`	`0.2`	Gap between bars as a fraction of bar width (0–1)
`labelFontSize`	`number`	`12`	Font size for labels

Code Example

elements: {
  cities: {
    id: 'cities',
    type: 'barChart',
    props: {
      type: 'barChart',
      bars: [
        { label: 'Paris', value: 0.92, color: '#6c5ce7' },
        { label: 'Lyon', value: 0.03, color: '#a29bfe' },
        { label: 'Berlin', value: 0.015, color: '#81ecec' },
      ],
      x: 50, y: 30, width: 400, height: 230,
      labelColor: '$foreground', showValues: true, valueFormat: 'percent', maxValue: 1,
    },
  },
}