I created a custom history graph card today that allows you to zoom on your data, does live updating and is more customizable.
Will need some further tweaking, especially with some caching.
Compared to the default:
and zoomed in:
![image](https://community-assets.home-assistant.io/original/3X/b/6/b6bff1285f7b576283044324f74cc12e4e40049a.png)
shown config:
- type: "custom:graph-card"
hours_to_show: 24
update_interval: 10
zoom: 75
entities:
- entity: sensor.elektra_verbruik_vandaag
color: "#ffce57"
areaStyle: {}
smooth: true
name: Totaal
- entity: sensor.elektra_dal_verbruik_vandaag
name: Dal
color: "#36A2EB"
smooth: true
areaStyle: {}
- entity: sensor.elektra_piek_verbruik_vandaag
name: Piek
color: "#FF6384"
smooth: true
areaStyle: {}
basic config:
- type: "custom:graph-card"
entities:
- sensor.elektra_verbruik_vandaag
- sensor.elektra_dal_verbruik_vandaag
- sensor.elektra_piek_verbruik_vandaag
advanced config:
- type: "custom:graph-card"
title: 'Stroom verbruik'
hours_to_show: 24
update_interval: 10
zoom: 75
entities:
- entity: sensor.elektra_dal_verbruik_vandaag
name: Dal
smooth: false
color: "blue"
areaStyle:
color:
type: 'linear'
x: 0
y: 0
x2: 0
y2: 1
colorStops:
- offset: 0
color: 'red'
- offset: 1
color: 'blue'
globalCoord: false
- entity: sensor.elektra_piek_verbruik_vandaag
name: Piek
smooth: true
color: "red"
areaStyle:
color:
type: 'radial'
x: 0.5
y: 0.5
r: 0.5
colorStops:
- offset: 0
color: 'blue'
- offset: 1
color: 'red'
globalCoord: false
- entity: sensor.elektra_verbruik_vandaag
areaStyle: {}
name: Totaal
- sensor.elektra_verbruik_vandaag
Installation:
Download graph-card.js and echarts.min.js and place them in /config/www/custom-lovelace/graph-card/ (or another folder but you will need to adjust the path to echarts.min.js in graph-card.js)
Include graph-card.js in your lovelace config:
resources:
- url: /local/custom-lovelace/graph-card/graph-card.js?v=0.1
type: js