Home Assistant; Charts: Scroll- Zoom; Development status

Table of Contents

Chart zoom function
Using the date range selection?
Chart library: Chart.js vs. ECharts?

Possible advantages of switching to ECharts:

Alternative cards
Relevant communication / feature request on Github
Pull requests

[Deutsch]

➦ Soon available in Home Assistant, planned or just a workaround ➨ Statistics diagram: missing date / time selection

Something is happening: the long-neglected history in Home Assistant is getting numerous improvements. With the 2025-01 release, the charts are getting a rudimentary zoom function, among other things. Rudimentary, because currently only one chart can be zoomed when there are several charts. With the 2025.2 release, the chart library was migrated from chart.js to Apache Echart, as the chart library Chart.js originally used was increasingly reaching its performance limits. ECharts offers extended functionalities and better performance for complex tasks and larger data volumes. However, I was unable to confirm this in an initial test of the current development version: The first ECharts implementation cannot yet keep up visually and still feels very sluggish when scrolling.

Chart zoom function

The first pull request for the zoom function is included in release 2025.1. This represents an important step towards modernizing the history. With the introduction of Echarts, the option to select a specific area disappeared again. However, Echart should pave the way for future functions: The next logical step should be to implement the function for selecting an older time period. Equally important is the synchronization of the zoom status across all charts if several charts are displayed in the history or in the energy dashboard. This is currently possible for the history and the logbook via the date selection: Since 2025.1, the time range can also be defined for statistics chart maps.

Using the date range selection?

Alternatively, it would be possible to customize the time range based on the date picker, similar to the forward and back buttons, with your own buttons:

With the help of the buttons, the time range can be enlarged without further ado and if several charts are displayed, they all have the same start and end time. I have included a corresponding pull request for this.

Chart library: Chart.js vs. ECharts?

January 2025: The developers of Home Assistant are currently testing the chart library: ECharts.(Status: January 2025)

Possible advantages of switching to ECharts:

Linked charts: ECharts natively supports the creation of linked charts. For example, zooming in one chart can automatically update corresponding data in another.
Dynamic data loading: ECharts provides efficient ways to dynamically load data. Data can be updated during runtime without re-rendering the chart, making the display interactive and fluid.
Powerful for large amounts of data: ECharts demonstrates outstanding performance when handling large amounts of data. The graphics rendering engine has been optimized to enable fast display without latency.
Variety of chart types: ECharts offers a wide range of predefined chart types and allows deep customization options. see: https://echarts.apache.org/examples/en/index.html

Alternative cards

Plotly Graph
- Advantage: flexible incl. the possibility to visualize historical data
- Disadvantages:
  - Advanced config in YAML
  - No date selection available
  - cannot be called directly from any entity without creating your own dashboard