Chart Types

Line Charts

Plot time-series or continuous data with layered lines, gradients, and dual-axis support. Lines register with the chart context, enabling shared tooltips, legends, and crosshairs.

Example

"use client";

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

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

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

  return (
    <Chart.Root data={data as unknown as ChartDataPoint[]} height={300}>
      <Chart.LineSeries
        x="timestamp"
        y="return_temp"
        name="Return Temperature"
        color="var(--primitives-color-dataviz-series-2)"
        currentValueDot
      />
      <Chart.LineSeries
        x="timestamp"
        y="outdoor_temp"
        name="Outdoor Temperature"
        color="var(--ambient-data-series-7)"
        currentValueDot={{
          size: 12,
          fill: "white",
          stroke: "var(--primitives-color-dataviz-series-7)",
          strokeWidth: 2.5,
        }}
      />
      <Chart.XAxis label="Time" tickFormat={formatTimeTick} />
      <Chart.YAxis label="Temperature (°F)" />
      <Chart.Legend />
    </Chart.Root>
  );
}

The demo shows multiple temperature series on the primary axis. Combine this with regions, annotations, and brushing for richer monitoring views.

Usage

<Chart.Root data={data} height={360}>
  <Chart.XAxis label="Time" />
  <Chart.YAxis label="Temperature (°F)" />
  <Chart.LineSeries
    x="timestamp"
    y="supply_temp"
    name="Supply"
    color="var(--ambient-data-series-5)"
    showArea
  />
  <Chart.LineSeries
    x="timestamp"
    y="return_temp"
    name="Return"
    color="var(--ambient-data-series-2)"
  />
  <Chart.Legend />
</Chart.Root>

Props

Chart.LineSeries
Prop	Type	Default	Description
data	ChartDataPoint[]	Root data	Optional override for the series dataset. Falls back to `Chart.Root` `data`.
x	string	—	Field name used for the x-domain (dates or numbers).
y	string	—	Field name used for y-values.
name	string	Series label	Display name surfaced in the legend and tooltip. Provide it for multi-series charts.
color	string	Theme line token	Hex or CSS color. Falls back to the sequential palette in `chart-constants.ts`.
axis	string	`"y"`	Optional secondary axis name. Use with a matching `<Chart.YAxis name="..." />`.
strokeWidth	number	2	Line weight in pixels.
curve	CurveType	`"linear"`	Observable Plot curve interpolation. Common values: `linear`, `step`, `natural`.
strokeDasharray	string	—	Dash pattern string (`"4,2"`) for differentiating forecast vs. actual series.
showArea	boolean	false	Render a filled gradient beneath the line. Useful for emphasising magnitude.
areaOpacity	number	0.1	Opacity applied to the generated gradient when `showArea` is enabled.
unit	string	—	Optional unit suffix appended to tooltip values (°F, kWh, etc.).

Tips for multi-series charts

Use `axis` to bind a series to named right-side axes when magnitudes differ.
Provide `unit` strings so the tooltip can format and suffix values consistently.
Toggle `showArea` on a single series to create contextual emphasis without overcrowding the legend.