Bar Chart

Anatomy

Import the BarChart component and access every part using dot notation. It is built on visx for its scales and SVG and the motion library for the entrance and hover animation.

import {BarChart} from "@blakeui/pro-react";

<BarChart>
  <BarChart.Grid />
  <BarChart.Bar />
  <BarChart.XAxis />
  <BarChart.YAxis />
  <BarChart.Tooltip />
</BarChart>;

Usage

Pass a data array (each row has a category field plus one numeric field per series) and compose the grid, bar series, axes, and tooltip as children. Set xDataKey to the category field; series colors come from the categorical --chart-1 … --chart-5 tokens, while the chart's chrome maps onto BlakeUI's neutral tokens automatically.

import {BarChart} from "@blakeui/pro-react";

const data = [
  {month: "Jan", online: 4200, retail: 2800, direct: 3400},
  {month: "Feb", online: 6300, retail: 4100, direct: 5100},
  // …
];

const usd = (value: number) => `$${(value / 1000).toFixed(0)}k`;

function App() {
  return (
    <BarChart data={data} xDataKey="month">
      <BarChart.Grid horizontal />
      <BarChart.Bar dataKey="online" fill="var(--chart-1)" name="Online" />
      <BarChart.Bar dataKey="retail" fill="var(--chart-2)" name="Retail" />
      <BarChart.Bar dataKey="direct" fill="var(--chart-3)" name="Direct" />
      <BarChart.XAxis />
      <BarChart.YAxis formatValue={usd} />
      <BarChart.Tooltip valuePrefix="$" />
    </BarChart>
  );
}

The chart is keyboard-accessible: focus it and use the left / right arrow keys (or Home / End) to move the crosshair across categories. The dots, the category pill, and the panel follow, and the active category is announced to screen readers through a live region. Every animation respects prefers-reduced-motion.

API Reference

BarChart

The root wrapper. Measures its container, builds the categorical (scaleBand) and value (scaleLinear) scales, and renders the SVG plus the hover and loading layers.

Also supports all native div HTML attributes.

BarChart.Bar

A bar series. Self-renders its bars per category; overlay bars (an explicit barWidth) center in the band concentrically, while auto-width bars are grouped side-by-side.

BarChart.XAxis

Bottom category axis. Labels are centered under each band.

BarChart.YAxis

Left (or right) value axis.

BarChart.Grid

Chart grid lines mapped onto --separator, with optional soft end-fades.

BarChart.Tooltip

Declares the hover tooltip. Renders nothing itself — the chart reads its props and draws the crosshair, per-bar dots, category pill, and floating panel.

Animation

Bars animate in on mount and on the load→ready reveal. animationType="grow" (the default) scales each bar up from the baseline; animationType="fade" blurs and fades it in. Either way the bars are auto-staggered left-to-right so the whole entrance settles within ~1.2s, on a cubic-bezier(0.85, 0, 0.15, 1) curve. animationDuration tunes the total, and staggerDelay overrides the per-category step. Under prefers-reduced-motion the bars appear instantly with no stagger.

<BarChart data={data} xDataKey="month" animationDuration={1100}>
  <BarChart.Bar dataKey="online" animationType="fade" fill="var(--chart-1)" />
</BarChart>

Line Cap

lineCap controls a bar's corner treatment. "round" (the default) renders a full capsule — min(width, height) / 2 on every corner — so tall bars float as pills and short bars degrade to a lozenge without ever inverting. "butt" squares the corners; a number sets an explicit uniform radius (clamped the same way).

<BarChart.Bar dataKey="units" fill="var(--chart-1)" lineCap="round" />
<BarChart.Bar dataKey="units" fill="var(--chart-1)" lineCap="butt" />
<BarChart.Bar dataKey="units" fill="var(--chart-1)" lineCap={4} />

Horizontal & Stacked

Set orientation="horizontal" on the root to swap the category and value axes, and stacked (with each Bar sharing a stackId) to stack series into a single bar per category; stackGap adds a px gap between the stacked segments.

Loading

Set status="loading" to show a grouped shimmer skeleton while data resolves; flip it to "ready" and the chart tweens its y-domain and reveals the real bars with the grow + stagger entrance. Drive status from your data layer. BarChart.Loading is a turnkey shortcut for <BarChart status="loading" />.

import {BarChart} from "@blakeui/pro-react";
import {useState} from "react";

function App() {
  const [status, setStatus] = useState<"loading" | "ready">("loading");

  return (
    <BarChart data={data} xDataKey="month" status={status} loadingLabel="Loading channels…">
      <BarChart.Grid horizontal />
      <BarChart.Bar dataKey="online" fill="var(--chart-1)" name="Online" />
      <BarChart.XAxis />
      <BarChart.YAxis />
      <BarChart.Tooltip />
    </BarChart>
  );
}

Theming

Series colors are driven by the categorical chart palette (--chart-1 … --chart-5) — set each series' fill. All other chrome maps onto neutral/semantic tokens: grid lines use --separator; the crosshair, axis labels, and loading skeleton use --muted; values and the dot fill use --foreground / --surface; the tooltip panel uses --overlay with --overlay-shadow; and the active-category pill is an inverse chip (--background text on a --foreground fill). Override any token in your theme to restyle the chart.

Dependencies

The bar chart is built on visx (@visx/scale, @visx/grid, @visx/event) for its scales and SVG, motion for the entrance, hover, and loading animation, and react-use-measure for responsive sizing.