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

import { Player, FadeIn, BarChart } from '@elucim/core';

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <FadeIn duration={25}>
    <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="currentColor" showValues valueFormat="percent" maxValue={1}
    />
  </FadeIn>
</Player>

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "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,
      "showValues": true, "valueFormat": "percent", "maxValue": 1,
      "fadeIn": { "duration": 25 }
    }
  ]
}