Wrong axis titles on subplots

[markuska00]

I want to start by thanking you for an incredibly good card.
It's exactly what I've been looking for. 😃 😃

I have 2 problems with the card.

I do not get hoverlabel (I think it is called that) to appear on my Mobile App with Android.
The box with the current value when you have the mouse pointer over.
But it shows up on my pc with windows.

I love the new possibility of multiple graphs in 0.6.0 that are together

But I'm having problem with the left column with the unit.

In my example it should have been:
"°C"
"DM"
"°C"
"Hz"
"kr/timma"
"öre/timma"

There is no sensor with Hz as unit in the third graph.

Thank you,

[dbuezas]

Hey Markus,
thanks! Happy to hear you find it useful!
Send the yaml over and I'll take a look

[markuska00]

Here is the yaml with unit from the sensors.

type: custom:plotly-graph
entities:
  - entity: sensor.nibe_36061_40004  #unit '°C'
    yaxis: y1
  - entity: sensor.nibe_36061_43005  #unit 'DM'
    yaxis: y2
  - entity: sensor.nibe_36061_43009  #unit '°C'
    yaxis: y3
  - entity: sensor.nibe_36061_40008  #unit '°C'
    yaxis: y3
  - entity: sensor.nibe_36061_43123  #unit 'Hz'
    yaxis: y4
  - entity: sensor.nibe_36061_43136   #unit 'Hz'
    yaxis: y4
  - entity: sensor.nibe_36061_43084    #unit 'kW'
    yaxis: y5
  - entity: sensor.varmepump_pris_kw   #unit 'kr/timma'
    yaxis: y5
  - entity: sensor.pris_varmepump_snitt_dygn    #unit 'kr/timma'
    yaxis: y5
  - entity: sensor.nibe_36061_10069   #unit 'öre/kWh'
    yaxis: y6
  - entity: sensor.nordpool_dygnspris_el   #unit 'öre/kWh'
    yaxis: y6
no_default_layout: true
default_trace:
  line:
    width: 1.5
layout:
  dragmode: pan
  margin:
    t: 30
    l: 55
    r: 30
    b: 50
  showlegend: false
  height: 650
  yaxis:
    fixedrange: true
  yaxis2:
    fixedrange: true
  yaxis3:
    range:
      - 24
      - 40
    fixedrange: true
  yaxis4:
    fixedrange: true
  yaxis5:
    fixedrange: true
  yaxis6:
    fixedrange: true
  yaxis7:
    fixedrange: true
  grid:
    rows: 6
    columns: 1
    pattern: coupled
    roworder: top to bottom
  xaxis:
    rangeselector:
      'y': 1.01
      buttons:
        - count: 1
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
hours_to_show: 12
refresh_interval: 10

[dbuezas]

Thanks, I'll take a look.
In the meantime, you can override the units with unit_of_measurement

Example: https://github.com/dbuezas/lovelace-plotly-graph-card#accumulated-value

[markuska00]

Change the utits with unit_of_measurement did not solve the problem.

Unit on yaxis 1 and 2 is correct
But yaxis 3 get unit from yaxis 4
And same with yaxis 4 get unit from yaxis 5

[dbuezas]

I found a way to reproduce your issue. It looks like plotly gets confused if the units of measurement within each subplot don't match
Try this:
I found a way to reproduce your issue. It looks like plotly gets confused if the units of measurement within each subplot don't match
Try this:

type: custom:plotly-graph
entities:
  - entity: sensor.nibe_36061_40004  #unit '°C'
    yaxis: y1
    unit_of_measurement: °C
  - entity: sensor.nibe_36061_43005  #unit 'DM'
    yaxis: y2
    unit_of_measurement: DM
  - entity: sensor.nibe_36061_43009  #unit '°C'
    yaxis: y3
    unit_of_measurement: °C
  - entity: sensor.nibe_36061_40008  #unit '°C'
    yaxis: y3
    unit_of_measurement: °C
  - entity: sensor.nibe_36061_43123  #unit 'Hz'
    yaxis: y4
    unit_of_measurement: Hz
  - entity: sensor.nibe_36061_43136   #unit 'Hz'
    yaxis: y4
    unit_of_measurement: Hz
  - entity: sensor.nibe_36061_43084    #unit 'kW'
    yaxis: y5
    unit_of_measurement: KW
  - entity: sensor.varmepump_pris_kw   #unit 'kr/timma'
    yaxis: y6 #y5
    unit_of_measurement: kr/timma
  - entity: sensor.pris_varmepump_snitt_dygn    #unit 'kr/timma'
    yaxis: y6 #y5
    unit_of_measurement: kr/timma
  - entity: sensor.nibe_36061_10069   #unit 'öre/kWh'
    yaxis: y7 #y6
    unit_of_measurement: öre/kWh
  - entity: sensor.nordpool_dygnspris_el   #unit 'öre/kWh'
    yaxis: y7 #y6
    unit_of_measurement: öre/kWh
no_default_layout: true
default_trace:
  line:
    width: 1.5
layout:
  dragmode: pan
  margin:
    t: 30
    l: 55
    r: 30
    b: 50
  showlegend: false
  height: 650
  yaxis:
    fixedrange: true
  yaxis2:
    fixedrange: true
  yaxis3:
    range:
      - 24
      - 40
    fixedrange: true
  yaxis4:
    fixedrange: true
  yaxis5:
    fixedrange: true
  yaxis6:
    fixedrange: true
  yaxis7:
    fixedrange: true
  grid:
    rows: 7 #6
    columns: 1
    pattern: coupled
    roworder: top to bottom
  xaxis:
    rangeselector:
      'y': 1.01
      buttons:
        - count: 1
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
hours_to_show: 12
refresh_interval: 10

[markuska00]

This is the result of the yaml from above.
unit on yaxis3 is missing

[dbuezas]

Interesting... I think it decided not render y3 b/c it is the same axis title.

Let's make them different:

type: custom:plotly-graph
entities:
  - entity: sensor.nibe_36061_40004  #unit '°C'
    yaxis: y1
    unit_of_measurement: °C
  - entity: sensor.nibe_36061_43005  #unit 'DM'
    yaxis: y2
    unit_of_measurement: DM
  - entity: sensor.nibe_36061_43009  #unit '°C'
    yaxis: y3
    unit_of_measurement: °C2
  - entity: sensor.nibe_36061_40008  #unit '°C'
    yaxis: y3
    unit_of_measurement: °C2
  - entity: sensor.nibe_36061_43123  #unit 'Hz'
    yaxis: y4
    unit_of_measurement: Hz
  - entity: sensor.nibe_36061_43136   #unit 'Hz'
    yaxis: y4
    unit_of_measurement: Hz
  - entity: sensor.nibe_36061_43084    #unit 'kW'
    yaxis: y5
    unit_of_measurement: KW
  - entity: sensor.varmepump_pris_kw   #unit 'kr/timma'
    yaxis: y6 #y5
    unit_of_measurement: kr/timma
  - entity: sensor.pris_varmepump_snitt_dygn    #unit 'kr/timma'
    yaxis: y6 #y5
    unit_of_measurement: kr/timma
  - entity: sensor.nibe_36061_10069   #unit 'öre/kWh'
    yaxis: y7 #y6
    unit_of_measurement: öre/kWh
  - entity: sensor.nordpool_dygnspris_el   #unit 'öre/kWh'
    yaxis: y7 #y6
    unit_of_measurement: öre/kWh
no_default_layout: true
default_trace:
  line:
    width: 1.5
layout:
  dragmode: pan
  margin:
    t: 30
    l: 55
    r: 30
    b: 50
  showlegend: false
  height: 650
  yaxis:
    fixedrange: true
  yaxis2:
    fixedrange: true
  yaxis3:
    range:
      - 24
      - 40
    fixedrange: true
  yaxis4:
    fixedrange: true
  yaxis5:
    fixedrange: true
  yaxis6:
    fixedrange: true
  yaxis7:
    fixedrange: true
  grid:
    rows: 7 #6
    columns: 1
    pattern: coupled
    roworder: top to bottom
  xaxis:
    rangeselector:
      'y': 1.01
      buttons:
        - count: 1
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
hours_to_show: 12
refresh_interval: 10

If this works then you can use "°C " (include quotes and space) for y3. It looks like a bug in the underlying plotting library.

[dbuezas]

Ok, it's not a bug in plotly, it is an incompatibility with the default axes titles I generate. I'll fix this by deactivating the generation when no_default_layout: true is used. Thanks for reporting!

[dbuezas]

Try v0.6.1 with your original yaml file, the problem should be gone

[markuska00]

Thank you very much!! 😃

[dbuezas]

Regarding the hover problem, that's not fixable at the moment. Plotly JS doesn't even support rendering inside a shadowdom so this only works thanks to a css hack I made. The sad consequence is that mouse and touchevents don't work fully. I hope plotly fixes this eventually.

Please confirm that at least your other bug is fixed (you have to manually update this lovelace card in hacs) and we can close the issue :)

[dbuezas]

I see here that the issue is fixed now.
Your plot looks really good!