Chart Types

Gauge Charts

Present cumulative proportions using horizontal stacked bars. Gauges excel at showing HVAC state breakdowns, time-in-mode summaries, or categorical utilisation percentages.

Example

HVAC Time States (24h)

Time in Temperature Zones (24h)

System Utilization (%)

Energy Consumption Breakdown

Comfort Zone Distribution

"use client";

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

import {
  getComfortZones,
  getEnergyBreakdown,
  getHVACTimeStates,
  getSystemUtilization,
  getTemperatureZones,
} from "./data/gauge-data";

export function ChartGaugeDemo() {
  // Get sample data
  const hvacStates = getHVACTimeStates();
  const tempZones = getTemperatureZones();
  const systemUtil = getSystemUtilization();
  const energyData = getEnergyBreakdown();
  const comfortData = getComfortZones();

  return (
    <div className="w-full space-y-8">
      {/* HVAC Time States */}
      <div>
        <h3 className="mb-2 text-sm font-medium">HVAC Time States (24h)</h3>
        <Chart.Root marginTop={0} marginBottom={0}>
          <Chart.GaugeSeries
            data={hvacStates as unknown as ChartDataPoint[]}
            category="category"
            value="value"
            colors={[
              "var(--primitives-color-dataviz-series-1-area)", // Heating
              "var(--primitives-color-dataviz-series-3-area)", // Cooling
              "var(--primitives-color-dataviz-series-5-area)", // Idle
            ]}
            height={20}
          />
        </Chart.Root>
      </div>

      {/* Temperature Zones */}
      <div>
        <h3 className="mb-2 text-sm font-medium">
          Time in Temperature Zones (24h)
        </h3>
        <Chart.Root marginTop={0} marginBottom={0}>
          <Chart.GaugeSeries
            data={tempZones as unknown as ChartDataPoint[]}
            category="category"
            value="value"
            colors={[
              "var(--primitives-color-dataviz-series-6-area)", // Below
              "var(--primitives-color-dataviz-series-4-area)", // At
              "var(--primitives-color-dataviz-series-2-area)", // Above
            ]}
            height={20}
          />
        </Chart.Root>
      </div>

      {/* System Utilization */}
      <div>
        <h3 className="mb-2 text-sm font-medium">System Utilization (%)</h3>
        <Chart.Root marginTop={0} marginBottom={0}>
          <Chart.GaugeSeries
            data={systemUtil as unknown as ChartDataPoint[]}
            category="category"
            value="value"
            colors={[
              "var(--primitives-color-dataviz-series-4-area)", // Active
              "var(--primitives-color-dataviz-series-7-area)", // Standby
              "var(--primitives-color-dataviz-series-5-area)", // Off
            ]}
            height={20}
          />
        </Chart.Root>
      </div>

      {/* Energy Breakdown */}
      <div>
        <h3 className="mb-2 text-sm font-medium">
          Energy Consumption Breakdown
        </h3>
        <Chart.Root marginTop={0} marginBottom={0}>
          <Chart.GaugeSeries
            data={energyData as unknown as ChartDataPoint[]}
            category="category"
            value="value"
            height={20}
          />
        </Chart.Root>
      </div>

      {/* Comfort Zones */}
      <div>
        <h3 className="mb-2 text-sm font-medium">Comfort Zone Distribution</h3>
        <Chart.Root marginTop={0} marginBottom={0}>
          <Chart.GaugeSeries
            data={comfortData as unknown as ChartDataPoint[]}
            category="category"
            value="value"
            colors={[
              "var(--primitives-color-dataviz-series-3-area)", // Too Cold
              "var(--primitives-color-dataviz-series-4-area)", // Comfortable
              "var(--primitives-color-dataviz-series-1-area)", // Too Warm
            ]}
            height={20}
          />
        </Chart.Root>
      </div>
    </div>
  );
}

Each segment displays the time share for a given HVAC cycle mode. Percentages are calculated automatically from the dataset.

Usage

<Chart.Root data={gaugeData} height={160}>
  <Chart.GaugeSeries
    data={gaugeData}
    category="mode"
    value="minutes"
    colors={[
      "var(--ambient-data-series-5-area)",
      "var(--ambient-data-series-3-area)",
      "var(--ambient-data-series-6-area)",
    ]}
    showPercentages
  />
</Chart.Root>

Props

Chart.GaugeSeries
Prop	Type	Default	Description
data	ChartDataPoint[]	—	Array of segments. Each data point should include category and value fields.
category	string	—	Field containing the category/state label for each segment (e.g. `mode`).
value	string	—	Field containing numeric values used to calculate segment widths.
colors	string[]	Theme gauge palette	Optional override for segment colours. Provide the same length as the dataset.
height	number	40	Segment bar height in pixels.
name	string	—	Display name surfaced in the legend and tooltip (if you include additional series).
showPercentages	boolean	false	When true, tooltip values show percentage-of-total instead of raw values.

Implementation notes

Gauges ignore chart axes — they render a horizontal bar stack within the root margins supplied to `Chart.Root`.
Tune the `height` prop on `Chart.GaugeSeries` to adjust bar thickness; the chart resizes automatically if you need more space.
Combine with `Chart.Region` overlays to highlight ideal ranges for target operating zones.
Use `showPercentages` whenever the underlying data is already normalised or you want to emphasise share-of-time.