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. And it is not yet possible to scroll to an older area. The chart library Chart.js currently in use is increasingly reaching its performance limits. New features such as the dynamic loading of data and the efficient linking of multiple charts may require the use of a more powerful library. A potential alternative to Chart.js is the ECharts library. This offers extended functionalities and better performance for complex tasks and larger data volumes.

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. 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 when multiple charts are displayed in the history or energy dashboard. The ability to set a time range for any Lovelance chart would also be a significant improvement.

Using the date range selection?

Alternatively, the time range could be customized based on the date picker, similar to the forward and back 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)

Advantages of a possible switch 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.

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