Skip to Content
🎉 Coral now has an MCP Server, check out the docs
DocumentationMoleculesEnergyOverview

EnergyOverview

Gives users the ability to see a full overview of their energy consumption for electric and gas.

The user can see their consumption data in day view, week view, month view, year view, and interval view. They can also view their consumption in kWh and cost. There is also a table view which is especially useful for accessibility.

Set an IANA timezone only when rendering timezone-aware data from @octopus-energy/measurements v2 or later. Pass the same timezone used to request and transform the measurements to EnergyOverviewCard or EnergyOverviewDualCard. The timezone applies to chart axes, tooltip intervals, and table dates. Otherwise, omit it and EnergyOverview will use the JavaScript runtime’s timezone.

Formerly known as ConsumptionGraphControl and ConsumptionGraph when exported from Blueprint, this component combines the functionality of both into a compound component alongside the use of new hooks useEnergyOverview and useEnergyOverviewTimeframe which handle the data processing and timeframe logic respectively.

Electricity example

Gas example

Multi example

Dual measurement example

Loading

No data / error

Full API

NameTypeDefault
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };
dateLocaleLocale
currencystring
localestring
kwhDecimalPlacesnumber

Round kWh values to a specific number of decimal places. If not provided, the default is 3 decimal places (DEFAULT_KWH_ROUND_TO_DECIMAL_PLACES).

3
costDecimalPlacesnumber

Round cost values to a specific number of decimal places. If not provided, the default is 2 decimal places (DEFAULT_COST_ROUND_TO_DECIMAL_PLACES).

2
loadingboolean
errorboolean
errorMessagestring
childrenReactNode
Last updated on