Home Assistant; Charts: Scroll- Zoom; Development status

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:

Expectations for the charts, possible future improvements

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.

Zoom using buttons: Rejected.

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

With the zoom buttons, the time range can be easily enlarged or reduced, even simultaneously for several charts. I submitted a corresponding pull request for the necessary code change on GitHub in December, but it was rejected in February 2025 because a comparable functionality is planned elsewhere. Since I don't want to wait that long, I still have the buttons in use in my Home Assistant instance. If you are interested in the buttons, please leave a comment on Github: https://github.com/home-assistant/frontend/pull/23358.

Home Assistant | Chart library: Chart.js vs. ECharts

January 2025: The developers of Home Assistant have changed the chart library to ECharts. ECharts could not only improve the performance of the charts, but also provide new chart options.

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

Relevant communication / feature request on Github

Pull requests

positive Bewertung({{pro_count}})
Rate Post:
{{percentage}} % positive
negative Bewertung({{con_count}})

THANK YOU for your review!

Questions / Comments


 
By continuing to browse the site, you agree to our use of cookies. More Details