Examples of my use case

[xalex75]

Hi .
First, thank you again for this custom graph, it gives everything that was really missing in the classic history graph in Lovelace.
At the moment I used it in just a couple of graph in my energy monitoring dashboard, but I will soon replace with it all other graph I have around in my HA.

I have a graph representing my solar production compared with energy usage and energy took or gave back from/to the grid, with default view set to 12h:

type: custom:plotly-graph
entities:
  - entity: sensor.ftv_f
    name: Produzione
  - entity: sensor.utilizzo_f
    name: Utilizzo
  - entity: sensor.generale_f
    name: Prelievo/Immissione
hours_to_show: 12
refresh_interval: 10
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day

Then I use it to monitor/compare heating (electric heatpump), cooling, and solar production, so I can see if heating is correctly working more during solar production, in order to minimize the cost (unfortunately it was cloudy/raining yesterday):

PDC=Heatpump FTV=Solar Production CLIMA=Air Conditioning

type: custom:plotly-graph
entities:
  - entity: sensor.hpsu_alex_f
    name: PDC
    fill: tozeroy
    line:
      width: 1
  - entity: sensor.ftv_f
    name: FTV
    fill: tozeroy
    line:
      width: 1
  - entity: sensor.clima_f
    name: CLIMA
    fill: tozeroy
    line:
      width: 1
hours_to_show: 12
refresh_interval: 10
title: Alex
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 2
          step: day

Having the possibility to zoom with pinch/mouse scroll ad using buttons, and to navigate the timeline, is wonderful and works very well, and adding custom configuration to it by following your examples is really easy.

[AleXSR700]

Thank you @xalex75 for sharing :)

I have a quick question: how did you force the legend to display outside of the chart area? Mine are always inside.

[xalex75]

Hi. I think it's just because of different versions. now it looks like this:

[AleXSR700]

So you have no placement settings? My sensors are always listed vertically (yours are horizontal) and are inside my charts.

[xalex75]

can you post a screenshot and maybe the code?

[dbuezas]

My sensors are always listed vertically

This is probably because their names are too long to fit horizontally.
Here is plotly's legend examples page: https://plotly.com/javascript/legend/
And the full API reference: https://plotly.com/javascript/reference/layout/#layout-legend

If you want to move the legend up, so that it doesn't occlude the plot, try with:

layout:
  legend:
     y: 1.5

this will move the legend to 150% of the available space in the y axis, pushing the plot down. (it is kind of weird)