Chart Types

Bar Charts

Compare categorical or interval data with responsive spacing and axis alignment. Bars automatically start at zero and participate in the same tooltip + legend system as line series.

Example

"use client";

import * as Chart from "@smartacteam/ambient-web/chart";
import { ChartDataPoint } from "@smartacteam/ambient-web/chart";

import { aggregateByHour } from "./data/aggregate-data";
import { getStandardSample } from "./data/sample-data";
import { getTimeTickFormatter } from "./utils/chart-formatters";

export function ChartBarDemo() {
  // Get 24-hour sample and aggregate by hour for bar chart
  const sampleData = getStandardSample();
  const hourlyData = aggregateByHour(sampleData);
  const formatTimeTick = getTimeTickFormatter();

  return (
    <Chart.Root data={hourlyData as unknown as ChartDataPoint[]} height={300}>
      <Chart.BarSeries
        x="timestamp"
        y="avg_supply_temp"
        name="Avg Supply Temperature"
        color="var(--primitives-color-dataviz-series-5)"
        interval="hour"
      />
      <Chart.XAxis label="Time" tickFormat={formatTimeTick} />
      <Chart.YAxis label="Temperature (°F)" />
      <Chart.Legend />
    </Chart.Root>
  );
}

Bars align with the shared time axis and pick up the tooltip's crosshair position, keeping value comparisons easy across intervals.

Usage

<Chart.Root data={sales} height={320}>
  <Chart.XAxis label="Month" />
  <Chart.YAxis label="Revenue ($)" />
  <Chart.BarSeries
    x="month"
    y="value"
    name="HVAC Service Revenue"
    color="var(--ambient-data-series-4)"
    interval="month"
  />
  <Chart.Legend />
</Chart.Root>

Props

Chart.BarSeries
Prop	Type	Default	Description
data	ChartDataPoint[]	Root data	Optional dataset override. Defaults to the array supplied to `Chart.Root`.
x	string	—	Field used for the horizontal dimension (usually time).
y	string	—	Field containing the bar value.
name	string	Series label	Legend and tooltip label. Required when rendering multiple bar series.
color	string	Theme bar token	Bar fill colour. Accepts CSS values or custom variables.
axis	string	`"y"`	Secondary axis key. Bind to a matching `<Chart.YAxis name="..." />` when needed.
opacity	number	0.9	Bar opacity applied to every rectangle.
interval	TimeInterval	`"day"`	Observable interval for grouping (e.g. `hour`, `day`, `week`, `month`).
unit	string	—	Tooltip unit suffix (kWh, %). Useful when mixing metrics with different scales.

Best practices

Use the `interval` prop when working with time-series data so bars snap to clean bins.
Keep bar colours opaque; leverage `opacity` when overlaying multiple series in the same bucket.
Pair bar charts with line overlays by stacking <Chart.LineSeries> siblings inside the same <Chart.Root>.