Chart

Composable charts using Recharts.

"use client";

import { useMemo } from "react";

import { Chart, ChartColor, Recharts } from "@smartacteam/ambient-web/chart";

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

export function ChartDemo() {
  const data = getStandardSample();
  const formatTimeTick = getTimeTickFormatter();

  const coolingPeriods = useMemo(() => {
    const periods: { start: number; end: number }[] = [];
    let cycleStart: number | null = null;
    data.map((point, index) => {
      if (point.cycle_mode === "Cool" && cycleStart === null) {
        cycleStart = point.timestamp;
      } else if (point.cycle_mode !== "Cool" && cycleStart !== null) {
        periods.push({
          start: cycleStart,
          end: data[index - 1].timestamp,
        });
        cycleStart = null;
      }
    });

    return periods;
  }, [data]);

  return (
    <Chart.Root
      className="h-100 w-full"
      config={{
        supply_target: {
          color: ChartColor.SERIES_5,
        },
        return_target: {
          color: ChartColor.SERIES_2,
        },
        supply_temp: {
          label: "Supply Temp",
          color: ChartColor.SERIES_5,
          unit: "°F",
          decimalPlaces: 1,
        },
        return_temp: {
          label: "Return Temp",
          color: ChartColor.SERIES_2,
          unit: "°F",
          decimalPlaces: 1,
        },
        return_pressure: {
          label: "Return Pressure",
          color: ChartColor.SERIES_4,
          unit: "kPa",
          decimalPlaces: 1,
        },
        outdoor_temp: {
          label: "Outdoor Temp",
          color: ChartColor.SERIES_7,
          unit: "°F",
          decimalPlaces: 1,
        },
      }}
    >
      <Recharts.LineChart
        data={data}
        margin={{ left: 0, top: 40, bottom: 10, right: 30 }}
      >
        <Recharts.XAxis
          type="auto"
          axisLine={false}
          dataKey="timestamp"
          domain={["dataMin", "dataMax"]}
          tickFormatter={formatTimeTick}
          // display 6 ticks on the x-axis
          ticks={data
            .map((d) => d.timestamp)
            .filter((_, i) => i % Math.ceil(data.length / 6) === 0)}
        >
          <Recharts.Label value="Time →" position="right" offset={10} />
        </Recharts.XAxis>

        <Recharts.YAxis
          type="number"
          tickCount={8}
          axisLine={false}
          yAxisId="temperature"
          domain={["dataMin - 5", "dataMax + 5"]}
          tickFormatter={(value) => value.toFixed(1)}
        >
          <Recharts.Label
            value="↑ Temperature (°F)"
            position="top"
            offset={20}
            dx={40}
          />
        </Recharts.YAxis>
        <Recharts.YAxis
          type="number"
          axisLine={false}
          yAxisId="pressure"
          tickCount={2}
          orientation="right"
          tickFormatter={(value) => value.toFixed(1)}
          domain={["dataMin - 0.05", "dataMax + 0.05"]}
        >
          <Recharts.Label
            value="Pressure (kPa) ↑"
            position="top"
            offset={20}
            dx={10}
          />
        </Recharts.YAxis>

        <Recharts.CartesianGrid
          syncWithTicks
          vertical={false}
          yAxisId="temperature"
        />

        <Recharts.Line
          dot={false}
          strokeWidth={2}
          type="monotone"
          yAxisId="temperature"
          dataKey="supply_temp"
          stroke="var(--color-supply_temp)"
        />
        <Recharts.Line
          dot={false}
          strokeWidth={2}
          type="monotone"
          yAxisId="temperature"
          dataKey="return_temp"
          stroke="var(--color-return_temp)"
        />
        <Recharts.Line
          dot={false}
          strokeWidth={2}
          type="monotone"
          yAxisId="temperature"
          dataKey="outdoor_temp"
          stroke="var(--color-outdoor_temp)"
        />
        <Recharts.Line
          dot={false}
          strokeWidth={2}
          type="monotone"
          yAxisId="pressure"
          dataKey="return_pressure"
          stroke="var(--color-return_pressure)"
        />

        <Recharts.ReferenceArea
          y1={72}
          y2={78}
          fillOpacity={0.08}
          yAxisId="temperature"
          fill={ChartColor.REGION}
        />

        {coolingPeriods.map((period, index) => (
          <Recharts.ReferenceArea
            key={`cooling-${index}`}
            yAxisId="temperature"
            x1={period.start}
            x2={period.end}
            fill={ChartColor.SERIES_6}
            fillOpacity={0.1}
          />
        ))}

        <Recharts.ReferenceLine
          y={75}
          yAxisId="temperature"
          stroke="var(--color-supply_target)"
        >
          <Recharts.Label
            offset={10}
            position="right"
            value="Target Supply"
            fill="var(--color-supply_target)"
          />
        </Recharts.ReferenceLine>
        <Recharts.ReferenceLine
          y={82}
          yAxisId="temperature"
          stroke="var(--color-return_target)"
        >
          <Recharts.Label
            offset={10}
            position="right"
            value="Target Return"
            fill="var(--color-return_target)"
          />
        </Recharts.ReferenceLine>

        <Recharts.Legend content={<Chart.LegendContent />} />
        <Recharts.Tooltip
          cursor={{ strokeDasharray: "2 2" }}
          content={
            <Chart.TooltipContent
              labelKey="timestamp"
              labelFormatter={formatTimeTick}
            />
          }
        />
      </Recharts.LineChart>
    </Chart.Root>
  );
}

Component

The chart component uses Recharts under the hood.

It is designed with composition in mind. You can use the components provided by the chart component or use Recharts components directly to build your charts.

import { Chart, Recharts } from "@smartacteam/ambient-web/chart";
 
export function MyChart() {
  return (
    <Recharts.Root>
      <Recharts.BarChart data={data}>
        <Recharts.Bar dataKey="value" />
        <Recharts.Tooltip content={<Chart.TooltipContent />} />
      </Recharts.BarChart>
    </Recharts.Root>
  );
}

Your First Chart

Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.

Define your chart config

import { ChartColor, type ChartConfig } from "@smartacteam/ambient-web/chart";
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: ChartColor.SERIES_1_AREA,
  },
  mobile: {
    label: "Mobile",
    color: ChartColor.SERIES_2_AREA,
  },
} satisfies ChartConfig;

Build your chart

You can now build your chart using Recharts components.

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: ChartColor.SERIES_1_AREA,
  },
  mobile: {
    label: "Mobile",
    color: ChartColor.SERIES_2_AREA,
  },
} satisfies ChartConfig;

export function ChartTutorialDemoPart1() {
  return (
    <Chart.Root config={chartConfig} className="h-100 w-full">
      <Recharts.BarChart accessibilityLayer data={chartData}>
        <Recharts.Bar
          radius={4}
          dataKey="desktop"
          fill="var(--color-desktop)"
        />
        <Recharts.Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
      </Recharts.BarChart>
    </Chart.Root>
  );
}

Add a grid

Let's add a grid to the chart.

<Chart.Root config={chartConfig} className="h-100 w-full">
  <Recharts.BarChart accessibilityLayer data={chartData}>
    <Recharts.CartesianGrid syncWithTicks vertical={false} />
    <Recharts.Bar radius={4} dataKey="desktop" fill="var(--color-desktop)" />
    <Recharts.Bar radius={4} dataKey="mobile" fill="var(--color-mobile)" />
  </Recharts.BarChart>
</Chart.Root>

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: ChartColor.SERIES_1_AREA,
  },
  mobile: {
    label: "Mobile",
    color: ChartColor.SERIES_2_AREA,
  },
} satisfies ChartConfig;

export function ChartTutorialDemoPart2() {
  return (
    <Chart.Root config={chartConfig} className="h-100 w-full">
      <Recharts.BarChart accessibilityLayer data={chartData}>
        <Recharts.CartesianGrid syncWithTicks vertical={false} />
        <Recharts.Bar
          radius={4}
          dataKey="desktop"
          fill="var(--color-desktop)"
        />
        <Recharts.Bar radius={4} dataKey="mobile" fill="var(--color-mobile)" />
      </Recharts.BarChart>
    </Chart.Root>
  );
}

Add an axis

To add an x-axis to the chart, we'll use the XAxis component.

<Chart.Root config={chartConfig} className="min-100 w-full">
  <Recharts.BarChart accessibilityLayer data={chartData}>
    <Recharts.CartesianGrid syncWithTicks vertical={false} />
    <Recharts.XAxis
      dataKey="month"
      tickLine={false}
      tickMargin={10}
      axisLine={false}
      tickFormatter={(value) => value.slice(0, 3)}
    />
    <Recharts.Bar radius={4} dataKey="desktop" fill="var(--color-desktop)" />
    <Recharts.Bar radius={4} dataKey="mobile" fill="var(--color-mobile)" />
  </Recharts.BarChart>
</Chart.Root>

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: ChartColor.SERIES_1_AREA,
  },
  mobile: {
    label: "Mobile",
    color: ChartColor.SERIES_2_AREA,
  },
} satisfies ChartConfig;

export function ChartTutorialDemoPart3() {
  return (
    <Chart.Root config={chartConfig} className="min-100 w-full">
      <Recharts.BarChart accessibilityLayer data={chartData}>
        <Recharts.CartesianGrid syncWithTicks vertical={false} />
        <Recharts.XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <Recharts.Bar
          radius={4}
          dataKey="desktop"
          fill="var(--color-desktop)"
        />
        <Recharts.Bar radius={4} dataKey="mobile" fill="var(--color-mobile)" />
      </Recharts.BarChart>
    </Chart.Root>
  );
}

So far we've only used components from Recharts. They look great out of the box thanks to some customization in the chart component.

To add a tooltip, we'll use <Recharts.Tooltip /> and the custom <Chart.TooltipContent /> component from chart.

<Chart.Root config={chartConfig} className="min-100 w-full">
  <Recharts.BarChart accessibilityLayer data={chartData}>
    <Recharts.CartesianGrid syncWithTicks vertical={false} />
    <Recharts.XAxis
      dataKey="month"
      tickLine={false}
      tickMargin={10}
      axisLine={false}
      tickFormatter={(value) => value.slice(0, 3)}
    />
 
    <Recharts.Bar radius={4} dataKey="desktop" fill="var(--color-desktop)" />
    <Recharts.Bar radius={4} dataKey="mobile" fill="var(--color-mobile)" />
 
    <Recharts.Tooltip
      content={<Chart.TooltipContent labelKey="month" />}
      cursor={{ stroke: "none", fill: ChartColor.REGION, fillOpacity: 0.1 }}
    />
  </Recharts.BarChart>
</Chart.Root>

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: ChartColor.SERIES_1_AREA,
  },
  mobile: {
    label: "Mobile",
    color: ChartColor.SERIES_2_AREA,
  },
} satisfies ChartConfig;

export function ChartTutorialDemoPart4() {
  return (
    <Chart.Root config={chartConfig} className="min-100 w-full">
      <Recharts.BarChart accessibilityLayer data={chartData}>
        <Recharts.CartesianGrid syncWithTicks vertical={false} />
        <Recharts.XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={(value) => value.slice(0, 3)}
        />

        <Recharts.Bar
          radius={4}
          dataKey="desktop"
          fill="var(--color-desktop)"
        />
        <Recharts.Bar radius={4} dataKey="mobile" fill="var(--color-mobile)" />

        <Recharts.Tooltip
          content={<Chart.TooltipContent labelKey="month" />}
          cursor={{ stroke: "none", fill: ChartColor.REGION, fillOpacity: 0.1 }}
        />
      </Recharts.BarChart>
    </Chart.Root>
  );
}

Add a legend

We'll do the same for the legend. We'll use <Recharts.Legend /> and the custom <Chart.LegendContent /> component from chart.

<Chart.Root config={chartConfig} className="min-100 w-full">
  <Recharts.BarChart accessibilityLayer data={chartData}>
    <Recharts.CartesianGrid syncWithTicks vertical={false} />
 
    <Recharts.XAxis
      dataKey="month"
      tickLine={false}
      tickMargin={10}
      axisLine={false}
      tickFormatter={(value) => value.slice(0, 3)}
    />
 
    <Recharts.Bar radius={4} dataKey="desktop" fill="var(--color-desktop)" />
    <Recharts.Bar radius={4} dataKey="mobile" fill="var(--color-mobile)" />
 
    <Recharts.Tooltip
      content={<Chart.TooltipContent labelKey="month" />}
      cursor={{ stroke: "none", fill: ChartColor.REGION, fillOpacity: 0.1 }}
    />
 
    <Recharts.Legend content={<Chart.LegendContent />} />
  </Recharts.BarChart>
</Chart.Root>

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: ChartColor.SERIES_1_AREA,
  },
  mobile: {
    label: "Mobile",
    color: ChartColor.SERIES_2_AREA,
  },
} satisfies ChartConfig;

export function ChartTutorialDemoPart5() {
  return (
    <Chart.Root config={chartConfig} className="min-100 w-full">
      <Recharts.BarChart accessibilityLayer data={chartData}>
        <Recharts.CartesianGrid syncWithTicks vertical={false} />

        <Recharts.XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={(value) => value.slice(0, 3)}
        />

        <Recharts.Bar
          radius={4}
          dataKey="desktop"
          fill="var(--color-desktop)"
        />
        <Recharts.Bar radius={4} dataKey="mobile" fill="var(--color-mobile)" />

        <Recharts.Tooltip
          content={<Chart.TooltipContent labelKey="month" />}
          cursor={{ stroke: "none", fill: ChartColor.REGION, fillOpacity: 0.1 }}
        />

        <Recharts.Legend content={<Chart.LegendContent />} />
      </Recharts.BarChart>
    </Chart.Root>
  );
}

Chart Config

The chart config is where you define the labels, icons, units, colors, etc. for a chart.

It is intentionally decoupled from chart data.

This allows you to share config and color tokens between charts. It can also work independently for cases where your data or color tokens live remotely or in a different format.

import { ChartColor, type ChartConfig } from "@smartacteam/ambient-web/chart";
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    icon: "IconTelevision",
    // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
    color: ChartColor.SERIES_1_AREA,
    // A string that will be appended to the value in tooltip and legend
    unit: " units",
    // The number of decimal places to show in tooltip and legend values
    decimalPlaces: 0,
    // OR a theme object with 'light' and 'dark' keys
    theme: {
      light: ChartColor.SERIES_1_AREA,
      dark: ChartColor.SERIES_2_AREA,
    },
  },
} satisfies ChartConfig;

Theming

Charts have built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.

CSS Variables

Define your colors in your css file

@layer base {
  :root {
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
  }
 
  .dark: {
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
  }
}

Add the color to your chartConfig

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig;

hex, hsl or oklch

You can also define your colors directly in the chart config. Use the color format you prefer.

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "hsl(220, 98%, 61%)",
  },
  tablet: {
    label: "Tablet",
    color: "oklch(0.5 0.2 240)",
  },
  laptop: {
    label: "Laptop",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig;

Using colors

To use the theme colors in your chart, reference the colors using the format var(--color-KEY).

Components

<Recharts.Bar dataKey="desktop" fill="var(--color-desktop)" />

Chart Data

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
];

Tailwind

<Recharts.LabelList className="fill-[--color-desktop]" />

A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.

You can turn on/off any of these using the hideLabel, hideIndicator props and customize the indicator style using the indicator prop.

Use labelKey and nameKey to use a custom key for the tooltip label and name.

Chart comes with the <Chart.TooltipContent /> component. You can use this component to add custom tooltips to your chart.

<Recharts.Tooltip content={<Chart.TooltipContent />} />

Prop	Type	Description
`labelKey`	`string`	The key to use for the tooltip label.
`useValue`	`boolean`	Whether to use the value as label.
`nameKey`	`string`	The key to use for the tooltip name.
`hideLabel`	`boolean`	Whether to hide the tooltip label.
`hideIndicator`	`boolean`	Whether to hide the tooltip indicator.
`indicator`	`dot` `line` or `dashed`	The style of the tooltip indicator.

Custom

To use a custom key for tooltip label and names, use the labelKey and nameKey props.

const chartData = [
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
];
 
const chartConfig = {
  visitors: {
    label: "Total Visitors",
  },
  chrome: {
    label: "Chrome",
    color: "hsl(var(--chart-1))",
  },
  safari: {
    label: "Safari",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig;

<Recharts.Tooltip
  content={<Chart.TooltipContent labelKey="visitors" nameKey="browser" />}
/>

This will use Total Visitors for label and Chrome and Safari for the tooltip names.

Legend

You can use the custom <Chart.LegendContent> component to add a legend to your chart.

<Recharts.Legend content={<Chart.LegendContent />} />

Custom

To use a custom key for legend names, use the nameKey prop.

const chartData = [
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
];
 
const chartConfig = {
  chrome: {
    label: "Chrome",
    color: "hsl(var(--chart-1))",
  },
  safari: {
    label: "Safari",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig;

<Chart.Legend content={<Chart.LegendContent nameKey="browser" />} />

This will use Chrome and Safari for the legend names.

Accessibility

You can turn on the accessibilityLayer prop to add an accessible layer to your chart.

This prop adds keyboard access and screen reader support to your charts.

<Recharts.LineChart accessibilityLayer />

Examples

Simple Line Chart

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

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

const chartConfig = {
  return_temp: {
    label: "Return Temp",
    color: ChartColor.SERIES_2,
  },
  outdoor_temp: {
    label: "Outdoor Temp",
    color: ChartColor.SERIES_7,
  },
} satisfies ChartConfig;

export function ChartLineDemo() {
  // Get 24-hour sample with 5-minute intervals
  const data = getStandardSample();
  const formatTimeTick = getTimeTickFormatter();

  return (
    <Chart.Root className="h-100 w-full" config={chartConfig}>
      <Recharts.LineChart
        data={data}
        margin={{ top: 30, left: 0, bottom: 0, right: 10 }}
      >
        <Recharts.CartesianGrid vertical={false} />

        <Recharts.XAxis
          axisLine={false}
          dataKey="timestamp"
          domain={["dataMin", "dataMax"]}
          tickFormatter={formatTimeTick}
        />
        <Recharts.YAxis
          type="number"
          tickCount={4}
          axisLine={false}
          strokeWidth={2}
          dataKey="return_temp"
          domain={["dataMin - 5", "dataMax + 5"]}
        >
          <Recharts.Label
            value="↑ Temperature (°F)"
            position="top"
            offset={20}
            dx={40}
          />
        </Recharts.YAxis>

        <Recharts.Line
          unit="°F"
          dot={false}
          type="monotone"
          strokeWidth={2}
          dataKey="return_temp"
          stroke="var(--color-return_temp)"
        />
        <Recharts.Line
          unit="°F"
          dot={false}
          type="monotone"
          dataKey="outdoor_temp"
          stroke="var(--color-outdoor_temp)"
        />

        <Recharts.Legend content={<Chart.LegendContent />} />

        <Recharts.Tooltip
          cursor={{ strokeDasharray: "2 2" }}
          content={
            <Chart.TooltipContent
              className="w-52"
              labelKey="timestamp"
              labelFormatter={formatTimeTick}
            />
          }
        />
      </Recharts.LineChart>
    </Chart.Root>
  );
}

Line Chart with Annotations

"use client";

import { useMemo } from "react";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

import { getFilterPerformanceData } from "./data/filter-performance-data";

const chartConfig = {
  efficiency: {
    label: "Efficiency (%)",
    color: ChartColor.SERIES_5,
  },
} satisfies ChartConfig;

export function ChartLineDemo() {
  // Get 24-hour sample with 5-minute intervals
  const data = useMemo(() => getFilterPerformanceData(), []);

  const changePoint = useMemo(() => {
    for (let i = 1; i < data.length; i += 1) {
      const previous = data[i - 1];
      const current = data[i];
      if (current.efficiency >= 100 && previous.efficiency < 95) {
        return current;
      }
    }
    return data.find((point) => point.efficiency >= 100);
  }, [data]);

  return (
    <Chart.Root className="h-100 w-full" config={chartConfig}>
      <Recharts.LineChart
        data={data}
        margin={{ top: 30, left: 0, bottom: 0, right: 100 }}
      >
        <Recharts.CartesianGrid vertical={false} />

        <Recharts.XAxis
          axisLine={false}
          type="number"
          dataKey="timestamp"
          tickCount={4}
          domain={["dataMin", "dataMax"]}
          tickFormatter={(v) => {
            const formatter = new Intl.DateTimeFormat("en-US", {
              month: "short",
              day: "numeric",
            });
            return formatter.format(v);
          }}
        />
        <Recharts.YAxis
          type="number"
          tickCount={9}
          axisLine={false}
          dataKey="efficiency"
          domain={[60, 100]}
          tickFormatter={(v) => v.toFixed(0)}
        >
          <Recharts.Label
            value="↑ Efficiency (%)"
            position="top"
            offset={20}
            dx={40}
          />
        </Recharts.YAxis>

        <Recharts.ReferenceLine
          y={90}
          strokeWidth={2}
          strokeDasharray="6 4"
          stroke={ChartColor.SERIES_1}
        >
          <Recharts.Label
            value="Optimal Range"
            fill={ChartColor.SERIES_1}
            position="right"
            offset={10}
            fontWeight={500}
          />
        </Recharts.ReferenceLine>

        {changePoint && (
          <Recharts.ReferenceLine
            x={changePoint.timestamp}
            strokeWidth={2}
            stroke={ChartColor.SERIES_7}
          >
            <Recharts.Label
              value="Filter Change Detected"
              fill={ChartColor.SERIES_7}
              position="bottom"
              offset={0}
              dx={80}
              dy={-20}
              fontWeight={500}
            />
          </Recharts.ReferenceLine>
        )}

        <Recharts.Line
          unit="%"
          dot={false}
          type="monotone"
          strokeWidth={3}
          dataKey="efficiency"
          stroke="var(--color-efficiency)"
        />

        <Recharts.Legend content={<Chart.LegendContent />} />
      </Recharts.LineChart>
    </Chart.Root>
  );
}

Simple Bar Chart

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

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

const chartConfig = {
  avg_supply_temp: {
    label: "Avg Supply Temperature",
    color: ChartColor.SERIES_8_AREA,
    unit: "°F",
  },
} satisfies ChartConfig;

export function ChartBarDemo() {
  // Get 24-hour sample with 5-minute intervals
  const data = getStandardSample();
  const formatTimeTick = getTimeTickFormatter();
  const hourlyData = aggregateByHour(data);

  return (
    <Chart.Root className="h-100 w-full" config={chartConfig}>
      <Recharts.BarChart
        data={hourlyData}
        margin={{ top: 30, left: 10, bottom: 0, right: 10 }}
      >
        <Recharts.CartesianGrid syncWithTicks vertical={false} />
        <Recharts.XAxis
          axisLine={false}
          dataKey="timestamp"
          tickFormatter={formatTimeTick}
        />
        <Recharts.YAxis
          tickCount={8}
          axisLine={false}
          domain={[0, 80]}
          dataKey="avg_supply_temp"
        />
        <Recharts.Bar
          radius={4}
          fillOpacity={0.8}
          dataKey="avg_supply_temp"
          fill="var(--color-avg_supply_temp)"
        />
        <Recharts.Tooltip
          cursor={{ fill: ChartColor.REGION, fillOpacity: 0.08 }}
          content={
            <Chart.TooltipContent
              className="w-74"
              labelKey="timestamp"
              labelFormatter={formatTimeTick}
            />
          }
        />
        <Recharts.Legend content={<Chart.LegendContent />} />
      </Recharts.BarChart>
    </Chart.Root>
  );
}

Area Chart

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

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

const chartConfig = {
  outdoor_temp: {
    label: "Outdoor Temp",
    color: ChartColor.SERIES_7,
  },
} satisfies ChartConfig;

export function ChartAreaDemo() {
  // Get 24-hour sample with 5-minute intervals
  const data = getStandardSample();
  const formatTimeTick = getTimeTickFormatter();

  return (
    <Chart.Root className="h-100 w-full" config={chartConfig}>
      <Recharts.AreaChart
        data={data}
        margin={{ top: 30, left: 10, bottom: 0, right: 10 }}
      >
        <Recharts.CartesianGrid vertical={false} />
        <Recharts.Area
          type="monotone"
          unit="°F"
          dataKey="outdoor_temp"
          stroke="var(--color-outdoor_temp)"
          fill="var(--color-outdoor_temp)"
        />
        <Recharts.XAxis
          dataKey="timestamp"
          domain={["dataMin", "dataMax"]}
          tickFormatter={formatTimeTick}
        />
        <Recharts.YAxis
          type="number"
          tickCount={4}
          dataKey="return_temp"
          domain={["dataMin - 5", "dataMax + 5"]}
        >
          <Recharts.Label
            value="↑ Temperature (°F)"
            position="top"
            offset={20}
            dx={40}
          />
        </Recharts.YAxis>
        <Recharts.Legend content={<Chart.LegendContent />} />
        <Recharts.Tooltip
          content={
            <Chart.TooltipContent
              className="w-52"
              labelKey="timestamp"
              labelFormatter={formatTimeTick}
            />
          }
        />
      </Recharts.AreaChart>
    </Chart.Root>
  );
}

Scatter Chart

"use client";

import {
  Chart,
  ChartColor,
  type ChartConfig,
  Recharts,
} from "@smartacteam/ambient-web/chart";

const chartConfig = {
  x: {
    label: "Stature",
    color: ChartColor.SERIES_2,
  },
  y: {
    label: "Weight",
    color: ChartColor.SERIES_7,
  },
} satisfies ChartConfig;

const data = [
  { x: 100, y: 200, z: 200 },
  { x: 120, y: 100, z: 260 },
  { x: 170, y: 300, z: 400 },
  { x: 140, y: 250, z: 280 },
  { x: 150, y: 400, z: 500 },
  { x: 110, y: 280, z: 200 },
];

export function ChartScatterDemo() {
  return (
    <Chart.Root className="h-100 w-full" config={chartConfig}>
      <Recharts.ScatterChart
        data={data}
        margin={{ top: 30, left: 0, bottom: 0, right: 0 }}
      >
        <Recharts.CartesianGrid syncWithTicks />

        <Recharts.XAxis
          dataKey="x"
          axisLine
          unit="cm"
          domain={["dataMin", "dataMax"]}
        >
          <Recharts.Label
            value="Stature (cm) →"
            position="right"
            offset={-80}
            dy={20}
          />
        </Recharts.XAxis>
        <Recharts.YAxis
          type="number"
          dataKey="y"
          unit="Kg"
          axisLine
          width="auto"
          tickFormatter={(v) => v.toFixed(0)}
        >
          <Recharts.Label
            value="↑ Weight (Kg)"
            position="top"
            offset={20}
            dx={15}
          />
        </Recharts.YAxis>

        <Recharts.Scatter
          type="monotone"
          dataKey="y"
          stroke="var(--color-y)"
          fill="var(--color-y)"
        />

        <Recharts.Tooltip
          cursor={{ stroke: ChartColor.GRID, strokeDasharray: "2 2" }}
          content={
            <Chart.TooltipContent
              useValue
              className="w-52"
              labelKey="x"
              hideIndicator
              labelFormatter={(v) => `X: ${v} cm`}
            />
          }
        />

        <Recharts.Legend content={<Chart.LegendContent />} />
      </Recharts.ScatterChart>
    </Chart.Root>
  );
}

Chart

Component

Your First Chart

Define your chart config

Build your chart

Add a grid

Add an axis

Add a tooltip

Add a legend

Chart Config

Theming

CSS Variables

Add the color to your chartConfig

hex, hsl or oklch

Using colors

Components

Chart Data

Tailwind

Tooltip

Tooltip Content Props

Custom

Legend

Custom

Accessibility

Examples

Simple Line Chart

Line Chart with Annotations

Simple Bar Chart

Area Chart

Scatter Chart