Bar Chart with Total
Stacked bar chart with an animated NumberFlow total. Generic in the datum shape, so it can be reused for source breakdowns, device-by-device usage, or any other per-category time series.
Energy today
Usage
import { BarChartWithTotal } from '@epilot/spark-ui/bar-chart-with-total'
import type { BarChartSeries } from '@epilot/spark-ui/bar-chart'<BarChartWithTotal data={data} series={series} getCategory={getCategory} />The chart is generic in the datum type. Parametrise it for your shape:
<BarChartWithTotal<MyBucket>
data={buckets}
series={mySeries}
getCategory={(bucket) => bucket.hour}
/>Each BarChartSeries<T> reads its value off the datum via getValue, so series and data stay decoupled.
For a custom total, use BarChart with renderTotal directly.
Examples
Source breakdown
One series per power source (solar / battery / grid).
Energy today
Device usage with untracked share
A generic instantiation showing per-device consumption stacked together with a gray Untracked series for whatever the home consumed that didn't get attributed to a metered device.
Device usage today
API Reference
BarChartWithTotal<TDatum>
A thin wrapper over BarChart that supplies an animated renderTotal via NumberFlow. It forwards data, series, getCategory, categories, categoryTicks, formatCategory, highlightedCategory, showHighlightLine, title, yAxisUnit, formatValue, height, and className to BarChart.
| Prop | Type | Default |
|---|---|---|
data | TDatum[] | — |
series | BarChartSeries<TDatum>[] | — |
getCategory | (datum: TDatum) => BarChartCategory | — |
formatValue | (value: number) => string | — |
totalSuffix | string | — |
totalFormat | Format (NumberFlow format) | — |
BarChartCategory is string \| number. BarChartSeries<TDatum> is defined on BarChart (key, label, color, optional hoverFill, getValue).