Apexcard - I want to remake bar chart with coloured bar based on value

[bazcurtis]

As I continue my replacement of Apexcard to Plotly, I want to recreate the below.

I have managed to make this, but can't change the colour of the bars. I believe this isn't possible with Plotly. Is the correct way to do this, use a line graph and then fill using the colour I want?

Also, hovering over the blue sections give me no data.

type: custom:plotly-graph
entities:
  - entity: sensor.lux_battery
    name: |
      $ex "Battery (" + parseFloat(ys.at(-1)) + "%)"
    type: line
    line:
      color: green
      width: 2
  - entity: sensor.lux_battery_flow_live
    marker:
      color: blue
    name: |
      $ex "Flow Live (" + parseFloat(ys.at(-1)) + " w)"
    type: bar
hours_to_show: 12
refresh_interval: auto
title: Energy Cost
layout:
  xaxis:
    tickformat: "%H:%M"
    dtick: 1800000
    showgrid: true
  yaxis2:
    side: right
    overlaying: "y"
    tick0: 0
    dtick: 1000

For completeness, this is the Apexcard yaml

type: custom:apexcharts-card
experimental:
  color_threshold: true
apex_config:
  chart:
    stacked: true
graph_span: 12h
yaxis:
  - id: battery_usage
    decimals: 0
    max: ~3500
    apex_config:
      tickAmount: 5
  - id: battery
    opposite: true
    decimals: 0
    min: 0
    max: ~100
    apex_config:
      tickAmount: 4
span:
  end: hour
show:
  last_updated: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Battery flow live
series:
  - entity: sensor.lux_battery_flow_live
    yaxis_id: battery_usage
    color_threshold:
      - value: 2000
        color: red
      - value: 1000
        color: yellow
      - value: 500
        color: blue
      - value: 250
        color: purple
      - value: 0
        color: green
    name: Battery flow live
    type: column
    unit: " watts"
    group_by:
      func: max
      duration: 5 m
  - entity: sensor.lux_battery
    yaxis_id: battery
    name: Battery Charge
    type: line
    unit: " %"
    color: green
    group_by:
      func: max
      duration: 5m

[dbuezas]

To change the colors of individual bars like this for a continuous gradient:

marker:
      color: $ex ys

or like this if you have thresholds

    marker:
      color: |
        $ex ys.map(y => y > 1000 ? "green" : y > 0 ? "yellow" : "red")

btw, you may want to increase your bottom margin to make space for the ticks text

layout:
  margin:
    b: 50

[bazcurtis]

More good progress. Thanks once again. My only issue now is, I don't get any data when I hover over the bar sections. I only get the battery data from the line.

I was happy to make zero in the middle and set the axis to fix ranges. Slowly I am finding different pieces to plug together. I would really like gradient the line, but from my searching I had to makers and lines with scattergl.

type: custom:plotly-graph
entities:
  - entity: sensor.lux_battery
    name: |
      $ex "Battery (" + parseFloat(ys.at(-1)) + "%)"
    type: scattergl
    mode: markers+lines
    marker:
      color: |
        $ex ys.map(y => `hsl(${(y / 100) * 120}, 100%, 50%)`)
    line:
      width: 2
  - entity: sensor.lux_battery_flow_live
    name: |
      $ex "Flow Live (" + parseFloat(ys.at(-1)) + " w)"
    type: bar
    marker:
      color: >
        $ex ys.map(y => y > 1000 ? "red" : y > 500 ? "yellow" : y > 250 ? "blue"
        : y > 0 ? "purple" : "green")
hours_to_show: 12
refresh_interval: auto
title: Energy Cost
layout:
  xaxis:
    tickformat: "%H:%M"
    dtick: 1800000
    showgrid: true
  yaxis:
    range:
      - 0
      - 100
  yaxis2:
    side: right
    overlaying: "y"
    tick0: 0
    dtick: 1000
    range:
      - -3000
      - 3000
  margin:
    b: 75

[dbuezas]

Getting there!
I don't know why you are not getting the hover tooltip. You could try using type scatter instead of bar and use fill: tozeroy

[bazcurtis]

That works, but I lose the colour

type: custom:plotly-graph
entities:
  - entity: sensor.lux_battery
    name: |
      $ex "Battery (" + parseFloat(ys.at(-1)) + "%)"
    type: scattergl
    mode: markers+lines
    marker:
      color: |
        $ex ys.map(y => `hsl(${(y / 100) * 120}, 100%, 50%)`)
    line:
      width: 2
  - entity: sensor.lux_battery_flow_live
    name: |
      $ex "Flow Live (" + parseFloat(ys.at(-1)) + " w)"
    type: scatter
    fill: tozeroy
    marker:
      color: >
        $ex ys.map(y => y > 1000 ? "red" : y > 500 ? "yellow" : y > 250 ? "blue"
        : y > 0 ? "purple" : "green")
hours_to_show: 12
refresh_interval: auto
title: Energy Cost
layout:
  xaxis:
    tickformat: "%H:%M"
    dtick: 1800000
    showgrid: true
  yaxis:
    range:
      - 0
      - 100
  yaxis2:
    side: right
    overlaying: "y"
    tick0: 0
    dtick: 1000
    range:
      - -3000
      - 3000
  margin:
    b: 75