Custom buttons to change colorscale of multiple heatmap entities.

[deltamelter]

I'm unsure which colour scale I want to use with heatmap so decided to add multiple options to a set of custom buttons.
I don't know how to refer to the properties of an individual entity, tried a couple of variations.
Is it even possible to affect the style (colorscale) of individual entities?

Also... Is it possible to force the "system" buttons down the right side instead of over the chart title?

entities:
  - entity: ""
    z: $ex vars.z
    x: $ex vars.x
    "y": $ex vars.y
    text_auto: true
    type: heatmap
    offset: 0
    colorscale: $ex vars.colorscale
    contours_coloring: heatmap
    hovertemplate: "<b>Temp: </b>%{z:.2f}°C</br><extra></extra>"
  - entity: ""
    x: $ex vars.x2
    "y": $ex vars.y2
    z: $ex vars.z2
    text_auto: true
    type: heatmap
    showscale: false
    hoverongaps: false
    colorscale: $ex vars.colorscale
    contours_coloring: heatmap
raw_plotly_config: true
refresh_interval: auto
ha_theme: true
layout:
  updatemenus:
    - buttons:
        - args:
            - entities.0.colorscale
            - RdBu
          label: RdBu
          method: restyle
        - args:
            - entities:
                - "0": 
                  colorscale: Bluered
          label: Bluered
          method: restyle
        - args:
            - colorscale
            - Portland
          label: Portland
          method: restyle
      direction: down
      active: -1
      pad:
        l: 1
        t: 1
      x: 0.1
      "y": 90
      xanchor: right
      yanchor: top
      type: buttons

[deltamelter]

I found plotly python examples and doc to do exactly this, but it doesn't seem to translate to plotly.js or this card.
Any ideas on how to make the buttons reference the entity properties?

[deltamelter]

Interestingly it works if there is a single button

Oh? What yaml syntax works for you?

[dbuezas]

type: custom:plotly-graph
entities:
  - entity: sensor.openweathermap_temperature
    fn: |
      $fn ({ xs, ys, vars }) => {
        const x = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday",
        ];
        const y = ["Morning", "Afternoon", "Evening"];
        const sum = y.map((time) => x.map((day) => 0));
        const count = y.map((time) => x.map((day) => 0));
        for (let i = 0; i < xs.length; i++) {
          const date = xs[i];
          const time = Math.floor(date.getHours() / 8);
          const day = date.getDay();
          sum[time][day] += +ys[i];
          count[time][day]++;
        }
        const z = sum.map((row, time) =>
          row.map((val, day) => val / count[time][day])
        );
        vars.x = x;
        vars.y = y;
        vars.z = z;
      };
    x: $fn ({ vars }) => vars.x
    'y': $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z
    type: heatmap
    hoverongaps: false
raw_plotly_config: true
hours_to_show: 240
title: heatmap

layout:
  updatemenus:
    - buttons:
        - args:
            - colorscale
            - Portland
          label: Portland
          method: restyle
      direction: down
      active: -1
      pad:
        l: 1
        t: 1
      x: 0.1
      "y": 90
      xanchor: right
      yanchor: top
      type: buttons

[deltamelter]

not working for me, used your yaml, changing only the entity. When I set the colorscale to RdB (you don't specifically set it here) is does seem to flash to a different colour for a fraction of a second, but only one time, after that the button has no effect.

[deltamelter]

Tried with different browsers, mobile app and 2 different HA instances, but same behaviour. Stays slightly longer, but still less than 1 second. I changed to color scales of Reds and Greens, you can see more clearly when the colours change, but they change right back again. Could there be something else in the HA environment that is forcing the colours to change? maybe in a different chart?

[dbuezas]

I think the internal event listener used to download data when you scroll is breaking this.