build69
build69  /  Components  /  Charts  /  BarChart

BarChart

v1.0.5Updated 25 Jul 2026

Recharts-backed bar chart with grouped, stacked, horizontal, and color-by-point variants. The default categorical comparison chart.

Preview

Live · 11 stories
DefaultOpen ↗
Why this is recommendedchartbarrechartscategorical+2

The default, out-of-the-box BarChart.

Recommended for+14
  • Categorical comparison
  • Period-over-period bars
  • Top-N rankings
Tags+6
chartbarrechartscategoricaldata-vizdefault
Features+4
  • Grouped / stacked / horizontal layouts
  • Color-by-point
  • Hover tooltip + legend
  • Responsive container
  • categoryAxisWidth — widen the horizontal category axis so long labels do not clip
  • MiniBar variant for inline / table cells
  • i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
  • Continuous time-series (use LineChart / AreaChart)
  • Part-of-whole (use PieChart)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "BarChart" })

Usage

import { BarChart } from '@/components/data-viz/bar-chart';

<BarChart data={sales} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
data

Rows of categorical data

object[]yes
layout

Bar orientation

'vertical' | 'horizontal'
stacked

Stack series

boolean
categoryAxisWidth

Width (px) reserved for the category axis labels in horizontal mode. Default 64; raise it when long category names (20–25 chars) would otherwise clip to their trailing characters

number

Related