Bar Chart

BarChart is the bar primitive used inside Chart — use it directly when you need per-series color overrides, click handlers, or grouped-stacked layout. It supports the following:

• Each series is defined by a BarSeriesConfig ({ key, label?, color, unit?, stackId? }) so series order, color, and tooltip labels are explicit.
• layout controls how multiple series are arranged: single, grouped, stacked, or grouped-stacked (mix of stacking and grouping via stackId).
• orientation="horizontal" flips the axes — use it for long category labels.
• All click callbacks (onBarClick, onXAxisTickClick, onYAxisTickClick) receive the native mouse event as the last argument so you can call e.stopPropagation().
• unit on a series adds a suffix to its tooltip value.

Import

import { BarChart } from "h2o-library/charts";

Usage

Single

One metric across categories.

const data = [
  { x: "Bariatrics", cases: 35 },
  { x: "Cardiology", cases: 78 },
  { x: "Dermatology", cases: 23 },
];

<BarChart
  data={data}
  bars={[{ key: "cases", label: "Cases", color: "#041957" }]}
  layout="single"
/>;

Grouped

Side-by-side bars per category for multi-metric comparison.

<BarChart
  data={data}
  bars={[
    { key: "completed", label: "Completed", color: "#041957" },
    { key: "missed", label: "Missed", color: "#3767F6" },
  ]}
  layout="grouped"
/>;

Stacked

Stack series into one bar per category for part-to-whole comparison.

<BarChart
  data={data}
  bars={[
    { key: "cardiology", label: "Cardiology", color: "#041957" },
    { key: "dermatology", label: "Dermatology", color: "#3767F6" },
    { key: "neurology", label: "Neurology", color: "#9FB7FF" },
  ]}
  layout="stacked"
/>;

Grouped-Stacked

Stack some bars while keeping other groups side-by-side. Assign stackId to each bar — bars with the same stackId stack together; distinct stackId values are placed side-by-side.

const bars = [
  {
    key: "productA",
    label: "Product A",
    color: "#041957",
    stackId: "products",
  },
  {
    key: "productB",
    label: "Product B",
    color: "#3767F6",
    stackId: "products",
  },
  {
    key: "serviceA",
    label: "Service A",
    color: "#e94040",
    stackId: "services",
  },
  {
    key: "serviceB",
    label: "Service B",
    color: "#f08080",
    stackId: "services",
  },
];

<BarChart data={data} bars={bars} layout="grouped-stacked" />;

Horizontal

orientation="horizontal" flips the axes — use it when category labels are long and would otherwise overlap on the X axis. Long labels truncate with ellipsis and surface their full text in the native tooltip on hover.

<BarChart
  data={data}
  bars={[{ key: "score", label: "Score", color: "#041957", unit: "%" }]}
  layout="single"
  orientation="horizontal"
/>;

Click Events

onBarClick, onXAxisTickClick, and onYAxisTickClick all expose the native mouse event so you can stop propagation when needed.

<BarChart
  data={data}
  bars={bars}
  onBarClick={(dataPoint, index, dataKey, e) => {
    e.stopPropagation();
    console.log(dataKey, dataPoint);
  }}
  onXAxisTickClick={(value, e) => {
    e.stopPropagation();
    console.log("tick:", value);
  }}
/>;

Units in Tooltips

Setting unit on a series appends it to the value in the hover tooltip — useful for %, kg, min, etc.

<BarChart
  data={data}
  bars={[
    { key: "utilization", label: "Utilization", color: "#041957", unit: "%" },
  ]}
/>;

Playground

Keyboard

Interactive regions are only added when the matching click callback is passed (onBarClick, onXAxisTickClick, onYAxisTickClick). Those targets use role="button", tabIndex={0}, and activate with Enter or Space (same as click). Tab moves between focusable tick labels and bar segments that have handlers.

Props

BarChart

BarSeriesConfig

BarChartDataPoint

Design Guidelines

• Use single for one metric across categories.
• Use grouped for side-by-side multi-metric comparison.
• Use stacked for part-to-whole comparison; keep series count ≤ 5.
• Use grouped-stacked when you need both stacking within a group and grouping between groups.
• Use orientation="horizontal" when category names are long — it avoids tick-label overlap.
• For headline pages with one or two charts, prefer the Chart wrapper — it adds the title, KPI strip, and legend out of the box.

Accessibility

• Tooltips appear on mouse hover and are not keyboard-accessible by default.
• For critical data, provide a companion data table.
• onBarClick, onXAxisTickClick, and onYAxisTickClick make individual bars and axis ticks interactive — pair them with page-level keyboard handlers if you need keyboard parity.