I wanted to see my Power Consumption tougher with Electricity Price on a nice graphical representation.
For that I used Apxechard-Card: https://github.com/RomRider/apexcharts-card
I downloaded some code from Home Assistant forum and Facebook group and added some tweaks of my own.
The result is as shown on the image and the code can be downloaded here:
type: custom:apexcharts-card header: show: true title: Power Usage Hourly vs Electricity Price show_states: true colorize_states: true now: show: true label: Now graph_span: 74h span: start: day offset: '-25h' apex_config: xaxis: labels: format: ddd.MM chart: zoom: enabled: true toolbar: show: true tools: zoom: true zoomin: false zoomout: false pan: false reset: true tooltip: fixed: enabled: true position: bottomLeft yaxis: - id: first apex_config: min: 0 opposite: true forceNiceScale: true decimalsInFloat: 2 labels: show: true - id: second apex_config: opposite: false forceNiceScale: true decimalsInFloat: 1 labels: show: true all_series_config: stroke_width: 4 series: - entity: sensor.nordpool_kwh_oslo_nok_3_10_025 yaxis_id: first name: Yesterday type: area curve: stepline extend_to_end: false float_precision: 2 stroke_width: 2 opacity: 0.05 show: in_header: false legend_value: false in_chart: true color: '#00FF00' - entity: sensor.nordpool_kwh_oslo_nok_3_10_025 yaxis_id: first name: Today type: area curve: stepline extend_to_end: false float_precision: 2 stroke_width: 2 opacity: 0.5 show: in_header: false legend_value: false color: '#0080FF' data_generator: | return entity.attributes.raw_today.map((p) => { return [new Date(p.start), p.value]; }); - entity: sensor.nordpool_kwh_oslo_nok_3_10_025 yaxis_id: first name: Tomorrow type: area curve: stepline extend_to_end: false float_precision: 2 stroke_width: 2 opacity: 0.2 show: in_header: false legend_value: false extremas: true color: '#FF7F00' data_generator: | return entity.attributes.raw_tomorrow.map((p) => { return [new Date(p.start), p.value]; }); - entity: sensor.accumulated_consumption_current_house yaxis_id: second name: Power Usage type: line extend_to_end: false float_precision: 2 stroke_width: 2 opacity: 1 color: '#FF0000' show: in_header: true legend_value: false group_by: func: max - entity: sensor.nordpool_kwh_oslo_nok_3_10_025 yaxis_id: first name: Price Now type: area curve: stepline extend_to_end: false float_precision: 2 stroke_width: 0 opacity: 0.1 show: in_header: true legend_value: false in_chart: true color: '#0080FF'
Below is a Light Mode screenshot from my phone.
