Power History Chart

A diverging visx area chart of instantaneous solar, grid, battery, and consumption power over a day.

Power today

kW

Usage

import {
  PowerHistoryChart,
  type PowerHistoryPoint,
} from '@epilot/spark-ui/power-history-chart'

function DayPower() {
  return (
    <PowerHistoryChart
      data={points}
      unit="kW"
      formatX={formatHour}
      formatTooltipX={formatClock}
      labels={{
        solar: 'Solar',
        grid: 'Grid',
        battery: 'Battery',
        consumption: 'Consumption',
      }}
      title="Power today"
    />
  )
}

Use this for instantaneous power (day view). Solar, grid, and battery render as areas around a zero baseline; negative grid is feed-in and negative battery is charging. Consumption is a line overlay. The built-in Series Legend toggles series and the y-axis rescales to what remains visible.

For cumulative energy buckets (week/month/year), use Energy History Chart. For a custom multi-series time plot, use Line Chart.

Examples

Homes without a battery

omitSeries drops a series from the legend, areas, and tooltip entirely.

Power today

kW

API Reference

`PowerHistoryChartProps`

Prop	Type	Default	Description
`data`	`PowerHistoryPoint[]`	—	Points sorted by `t`.
`unit`	`string`	—	Axis and default tooltip unit (for example `"kW"`).
`formatX`	`(t: number) => string`	—	X-axis tick labels from epoch ms.
`formatTooltipX`	`(t: number) => string`	`formatX`	Tooltip time. Use a fuller clock when axis ticks are hour-only.
`formatValue`	`(value: number) => string`	two decimals	Tooltip values; unit is appended when using the default formatter.
`labels`	`{ solar, grid, battery, consumption }`	—	Legend and tooltip labels.
`omitSeries`	`readonly PowerHistorySeriesKey[]`	—	Series removed completely (no legend entry).
`highlightAt`	`number`	—	Epoch ms for the current-time dashed line. Omit to hide it.
`title`	`string`	—	Section title above the legend.
`height`	`number`	`260`	Plot height in px.
`className`	`string`	—	Merges onto the root.

`PowerHistoryPoint`

Field	Type	Description
`t`	`number`	Epoch milliseconds.
`solar`	`number`	Production (≥ 0).
`grid`	`number`	Signed: positive import, negative feed-in.
`battery`	`number`	Signed: positive discharge, negative charge.
`consumption`	`number`	Load (≥ 0), drawn as the overlay line.

`PowerHistorySeriesKey`

"solar" | "grid" | "battery" | "consumption"

Accessibility

Series toggles are buttons with aria-pressed. Hiding a series updates the plot and tooltip together.
The current-time marker (highlightAt) is visual only; announce "now" in surrounding copy if it matters.
Tooltips are pointer-only. Keep the title and legend labels as the durable description of what the chart shows.

Energy History Chart Sankey Chart

On this page

Usage Examples Homes without a battery API Reference PowerHistoryChartPropsPowerHistoryPointPowerHistorySeriesKeyAccessibility