Date formatting, line opacity and moving legend and title

[Tom-Bom-badil]

First of all: Thanks for all the work to bring 'custom:plotly-graph' to it's present stage - love it, and much appreciate all the work that has been put into this project. I just read the HA General Thread in one run (with lot's of copy-paste to example graphs for 'memorizing').

Currently I am migrating to HA from another system I've been using for ~10 years and with a Highcharts integration:

Previous system:

HA with plotly:

Q1: Is it possible to replace the date in the timeline like in the old system, e.g. with a filter or such? 00:00 is replaced in Highcharts with the date. This would save up some space, especially with several plots on top of each other.
Q2: What is the reason the lines look so 'opacious' in HA when a filled plot line is behind? Are there layers or something to bring them in front? (for sure something I overlooked)
Q3: Is there a way to freely move title and legend? (most likely: dito)
And finally Q4: Is there a way to hide the 0.2, 0.4 etc between 0 and 1 on y2 here, and ideally replace 0/1 with 'on'/'off'?

Thanks for help, much appreciated - apologize for the beginner questions, and again thanks for all the work bringing plotly into HA!

/tom

[dbuezas]

Thanks for the kind words!
You went through the whole thread, wow!
There's even more here: https://github.com/dbuezas/lovelace-plotly-graph-card/discussions

Q1: Is it possible to replace the date in the timeline like in the old system, e.g. with a filter or such? 00:00

You can override the tick formatter but I think this won't be enough for what you need. The only option I see is to override tickvals with an array of strings that you construct yourself using an universal expression $ex.

If you do, please make sure to make a Show&Tell post in the discussions! :)

Q2: What is the reason the lines look so 'opacious' in HA when a filled plot line is behind?

Try changing the order of your entities. If that is problematic because you need the data in a specific order to store in vars and process, you can always have the same entity twice (one first and one last) and mark one as internal: true so it doesn't get rendered.

Q3: Is there a way to freely move title and legend? (most likely: dito)

Yes, change the legend y value. See the defaults here.
See https://plotly.com/javascript/legend/ and https://plotly.com/javascript/reference/layout/#layout-legend for more.

And finally Q4: Is there a way to hide the 0.2, 0.4 etc between 0 and 1 on y2 here, and ideally replace 0/1 with 'on'/'off'?

The easiest way is to map the values to on/off using a map_y filter and this answer in a discussion

Viel Erfolg damit!

[Tom-Bom-badil]

Thanks David, appreciate the detailed answer! :) The first priority at the moment is to get the 'raw' visualization going. The soure visu contains some quite complex CSS-styled pages, so it'll take a bit - fiddling around a lot while learning HA. The heating page with 4 plots is only one of ~10 pages to transfer (example here).

On Q1: For the moment, I have overriden the X tick intervals on one of the three stacked charts with a plain 'H:M', which works absolutely fine. The intention is to have the charts synchronized (scrolling/zooming), so it's sufficient to display the date in only one of them. Will further dig into this kind of 'fine tuning' after the raw implementation is done for all pages to transfer (most of them contain graphs).

Btw: Implementing the heating curve as displayed on the controller worked like a charm in plotly - done 1:1 within 3 hours only.

Will keep you posted! :)

/tom

[dbuezas]

Cool!

Since you're using this for your heating, you may find this useful: #362

[Tom-Bom-badil]

Since you're using this for your heating, you may find this useful: #362

😆 Yap, that one would've saved me at least one or two of the three hours.