Plotly interactive Graph Card

Hi,

I am really interested in using this card to produce a density histogram like that shown in your examples. I am struggling to find example code though and specifying plotly graph type ‘density_heatmap’ does not seem to work. I am probably missing something basic!

I have a variable electricity tariff and I would like to plot daily cost against use in the form of a histogram. As time goes on I expect most days to follow a straight line but some will be above and some below.

The following is code I have to do a 2d scatter, but I would like the heatmap/density map effect.

type: custom:plotly-graph
entities:
  - entity: >-
      sensor.octopus_energy_electricity_22l3941221_2000011182918_previous_accumulative_cost
    internal: true
    filters:
      - resample: 1d
    fn: $fn ({ xs, ys, vars }) => { vars.cost = ys; vars.xs = xs; }
  - entity: >-
      sensor.octopus_energy_electricity_22l3941221_2000011182918_previous_accumulative_consumption
    internal: true
    filters:
      - resample: 1d
    fn: $fn ({ ys, vars }) => vars.usage = ys
  - entity: ''
    x: $fn ({ vars }) => vars.cost
    'y': $fn ({ vars }) => vars.usage
    mode: density_heatmap
    marker:
      size: 7
    line:
      color: rgba(50, 50, 217, 0.5)
      width: 3
      opacity: 0.8
hours_to_show: 3600
raw_plotly_config: true
layout:
  margin: null
scene:
  xaxis:
    title: cost
  yaxis:
    title: usage