Chart

Chart is a high-level wrapper around the individual chart primitives — pick a type and pass data, the wrapper handles series detection, palette assignment, KPI display, an optional info tooltip, and the surrounding card layout.

• Bar/line series are derived from the keys of the first data point (everything except x); each key auto-maps to a color from the built-in palette.
• Pie data uses { label, value, color? } items — color falls back to the pie palette when omitted.
• Heatmap data uses { rows, columns, matrix } with a plain number[][].
• Bar-only props (layout, orientation) are typed off type="bar" so other types don't expose them.
• KPIs render in a strip alongside the chart for at-a-glance summary metrics.

For full control over series colors, click handlers, gradients, or grouped-stacked layout, use the individual chart components: BarChart, LineChart, PieChart, HeatmapChart.

Import

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

Usage

Bar

The simplest case — pass type="bar" and a flat array. Series are derived from the keys of the first data point.

<Chart
  type="bar"
  title="Website Traffic"
  description="Monthly page views and unique visitors"
  data={[
    { x: "Jan", "Page Views": 4000, "Unique Visitors": 2400 },
    { x: "Feb", "Page Views": 3000, "Unique Visitors": 1398 },
  ]}
  kpis={[
    { label: "Total Page Views", value: "1.2M" },
    { label: "Unique Visitors", value: "800K" },
  ]}
/>;

Grouped Bar

Multiple series shown side-by-side per category.

<Chart type="bar" layout="grouped" title="Appointments by Month" data={data} />;

Stacked Bar

Multiple series stacked into a single bar per category — best for part-to-whole comparison.

<Chart type="bar" layout="stacked" title="Cases by Specialty" data={data} />;

Horizontal Bar

orientation="horizontal" flips the axes — use it when category labels are long.

<Chart
  type="bar"
  layout="stacked"
  orientation="horizontal"
  title="Cases"
  data={data}
/>;

Line

For time-series and trend data. Same { x, ...keys } shape as bar.

<Chart
  type="line"
  title="Customer Growth"
  data={[
    { x: "Jan", "New Customers": 30, "Returning Customers": 10 },
    { x: "Feb", "New Customers": 45, "Returning Customers": 20 },
  ]}
/>;

Pie

Pie data uses { label, value }. Colors are optional — omit to use the built-in pie palette.

<Chart
  type="pie"
  title="Traffic Sources"
  data={[
    { label: "Organic", value: 55 },
    { label: "Direct", value: 25 },
  ]}
  kpis={[{ label: "Total Sessions", value: "5.4K" }]}
/>;

Heatmap

Heatmap data uses { rows, columns, matrix }. Cell intensity is normalized to the matrix maximum.

<Chart
  type="heatmap"
  title="User Engagement"
  data={{
    rows: ["Feature A", "Feature B"],
    columns: ["Mon", "Tue", "Wed"],
    matrix: [
      [10, 25, 15],
      [5, 40, 12],
    ],
  }}
/>;

Info Tooltip

The info prop renders an info icon next to the title with a tooltip on hover. It is independent of title — you can use one without the other.

<Chart
  type="line"
  title="User Activity"
  info="Weekly active and new user statistics"
  data={data}
/>;

KPI Strip

kpis renders a row of summary metrics next to the chart — useful for paired headline numbers.

<Chart
  type="bar"
  title="Financial Overview"
  data={data}
  kpis={[
    { label: "Avg Revenue", value: "$4.8K" },
    { label: "Avg Expenses", value: "$2.9K" },
  ]}
/>;

Playground

Keyboard

The card Chart primitive does not forward pointer/keyboard drill-in props. For keyboard-accessible series or axis regions, use BarChart, LineChart, or HeatmapChart with the documented on*Click callbacks.

Props

Chart

ChartKPI

Design Guidelines

• Reach for Chart for fast integration when you don't need custom colors, click handlers, or grouped-stacked layout.
• Drop down to the individual primitives when you need per-series color overrides, click events, gradient toggles, or grouped-stacked bar layout.
• Use bar for comparing discrete categories; grouped / stacked for sub-category breakdown.
• Use line for trends over time — connected points emphasize change.
• Use pie only for proportional composition with ≤ 5 categories — bar charts are more readable when comparing close values.
• Use heatmap for density patterns across two categorical dimensions (e.g. weekday × hour).
• Pair info with metrics whose definition isn't obvious from the title.

Accessibility

• Tooltips appear on hover and are not keyboard-accessible by default.
• KPIs render as plain text and are fully accessible to screen readers.
• For critical or audited data, provide a companion data table.