Energy History Chart

Stacked energy bars for week, month, or year buckets, wrapping Energy Bar Chart with fixed source series.

Energy this week

102.1 kWh

Usage

import {
  EnergyHistoryChart,
  type EnergyHistoryDatum,
} from '@epilot/spark-ui/energy-history-chart'

function WeekEnergy() {
  return (
    <EnergyHistoryChart
      data={week}
      unit="kWh"
      labels={{
        solar: 'Solar',
        battery: 'Battery',
        grid: 'Grid',
        gridFeedIn: 'Feed-in',
      }}
      title="Energy this week"
    />
  )
}

Use this for cumulative energy over discrete buckets. It is a thin wrapper over Energy Bar Chart / Bar Chart with solar, battery, grid, and optional feed-in series preconfigured. Feed-in renders below the baseline when labels.gridFeedIn is set.

For instantaneous power over a continuous day, use Power History Chart. For arbitrary categories and series, use Bar Chart directly.

Examples

Omit a series

Drop battery (or any source) when the home does not have that device.

Energy this week

89.5 kWh

API Reference

`EnergyHistoryChartProps`

Prop	Type	Default	Description
`data`	`EnergyHistoryDatum[]`	—	One row per bucket.
`unit`	`string`	—	Axis and total unit (for example `"kWh"`).
`formatValue`	`(value: number) => string`	two decimals	Tooltip values; default appends `unit`.
`formatBucketLabel`	`(bucket: string) => string`	raw bucket	Tooltip header for the hovered bucket.
`labels`	`{ solar, battery, grid, gridFeedIn? }`	—	Legend labels. Set `gridFeedIn` to draw export below the baseline.
`omitSeries`	`readonly EnergyHistorySeriesKey[]`	—	Series removed from legend, bars, and tooltip.
`highlightedBucket`	`string`	—	Emphasizes one bucket (current day/week).
`showHighlightLine`	`boolean`	—	Vertical dashed marker through `highlightedBucket`.
`title`	`string`	—	Section title.
`height`	`number`	`260`	Plot height in px.
`categoryTicks`	`string[]`	all buckets	Subset of bucket ids labeled on the x-axis.
`className`	`string`	—	Merges onto the root.

`EnergyHistoryDatum`

Field	Type	Description
`bucket`	`string`	Category id (weekday, day-of-month, month, …).
`solar`	`number`	Solar used on-site (kWh, ≥ 0).
`battery`	`number`	Battery discharged (kWh, ≥ 0).
`grid`	`number`	Grid imported (kWh, ≥ 0).
`gridFeedIn`	`number`	Optional export (kWh, ≥ 0); drawn below baseline.

`EnergyHistorySeriesKey`

"solar" | "battery" | "grid" | "gridFeedIn"

Accessibility

Same legend and tooltip behavior as Bar Chart.
Prefer formatBucketLabel when bucket ids are machine keys ("2026-07-01") so the tooltip reads as a human date.

Energy Bar Graph Power History Chart

On this page

Usage Examples Omit a series API Reference EnergyHistoryChartPropsEnergyHistoryDatumEnergyHistorySeriesKeyAccessibility