Data dependent values for plot parameters possible?

[midiwidi]

I'm currently setting up plotly graph cards for weather forecast data. A way of feeding the data into the plot was discussed here.

I can get the plot to look like I want if I use fix values for the text and range parameters.

type: custom:plotly-graph
entities:
  - entity: sensor.weather_forecast
    yaxis: y1
    type: bar
    name: Temperature
    unit_of_measurement: °C
    text: [16, 16, 15, 15, 14, 14, 14, 15, 18, 19, 21, 22, 23, 24, 24, 24, 23, 23, 22, 20, 19, 18, 17, 16]
    outsidetextfont:
      size: 15
    textposition: outside
    lambda: |-
      (ys, xs, entity) => {
        last = entity[entity.length - 1];
        xs = last['attributes']['datetime'].map(x => new Date(x));
        ys = last['attributes']['temperature'];
        return {x: xs, y: ys}
        }
  - entity: sensor.weather_forecast
    yaxis: y2
    type: bar
    name: Humidity
    unit_of_measurement: '%'
    text: [77, 78, 83, 85, 87, 89, 87, 82, 68, 60, 51, 45, 42, 40, 39, 39, 42, 43, 46, 52, 58, 65, 71, 76]
    outsidetextfont:
      size: 15
    textposition: outside
    lambda: |-
      (ys, xs, entity) => {
        last = entity[entity.length - 1];
        xs = last['attributes']['datetime'].map(x => new Date(x));
        ys = last['attributes']['humidity'];
        return {x: xs, y: ys}
        }
layout:
  title:
    text: Weather Forecast
  showlegend: false
  height: 300
  margin:
    t: 25
    l: 30
    r: 20
    b: 55
  plot_bgcolor: '#FFFDF0'
  grid:
    rows: 2
    columns: 1
    pattern: coupled
    roworder: top to bottom
  xaxis:
    showgrid: false
    ticklen: 0
    tickformat: '%H:%M'
    tickangle: -90
    dtick: 3600000
  yaxis:
    showticklabels: false
    showgrid: false
    ticklen: 0
    title:
      text: Temperature [°C]
    fixedrange: true
    range: [12, 26]
  yaxis2:
    showticklabels: false
    showgrid: false
    ticklen: 0
    title:
      text: Humidity [%]
    fixedrange: true
    range: [30, 100]
//refresh_interval: 10
no_default_layout: true

If I don't specify the range parameter, the auto-ranging sets the Y minimum to 0 because this is where the bars start. But I would like to set the lower limit of Y to the actual data minimum, or a bit below that, just as where it would be set to for a scatter plot. Furthermore the auto-scaling cuts the text label off at the top and I want to prevent that by setting the upper Y limit.

Question: Is it possible to set the Y range based on the min() and max() of the data series values? Maybe with a lambda function? Or is there another workaround?

Another (very similar) question: Is it possible to provide Y values to the text parameters so that data labels above the bars?

[dbuezas]

For a different approach see alternative 2 here: #35 (comment)

You van make line traces behave somewhat like bar charts, which will allow you to have a different minimum range

[midiwidi]

I think I prefere the bar chart over the "alternative 2" but I'll have a play around with line charts as an alternative.

[dbuezas]

Question: Is it possible to set the Y range based on the min() and max() of the data

Not at the moment. Although the "alternative 2" may get you close to it

[midiwidi]

Ok, fair enough. I'll stick with the autoscale or use fix values for the range.

[dbuezas]

Another (very similar) question: Is it possible to provide Y values to the text parameters so that data labels above the bars?

Yes, set the trace type to line+text (or something like that, google "plotlyjs show values"

[dbuezas]

Here be code: https://stackoverflow.com/questions/50595524/place-tick-marks-between-bars-in-plotly-js

[dbuezas]

Oh, that's not what mean.
Google " plotlyjs texttemplate"
Feel free to post a hand written mockup of what you want to achieve and I may understand better how to help :)

[midiwidi]

I will try to explain that a bit better.

What I want to achieve is labelling the different data points with their values (in the example here I only labelled a few and pointed arrows at it to make clear what I mean)

This can be done with the parameter "text" and works for bar charts as well as for line charts. Here is part of the card configuration I used to generate the example above which shows the relevant part.

type: custom:plotly-graph
entities:
  - entity: sensor.weather_forecast
    type: bar
    text: [19, 20, 18, 17, 18]
    lambda: |-
     . . .

Instead of the constant values for the text ( [19, 20, 18, 17, 18] ) I would like to use the actual Y values of the series.
If one uses plotly in python or JavaScript, one would just provide an array with the y data like this

import plotly.graph_objects as go

x = ['Product A', 'Product B', 'Product C']
y = [20, 14, 23]

# Use textposition='auto' for direct text
fig = go.Figure(data=[go.Bar(
            x=x, y=y,
            text=y,
            textposition='auto',
        )])

fig.show()

... or like this (but this didn't work with the graph card)

import plotly.express as px
df = px.data.medals_long()

fig = px.bar(df, x="medal", y="count", color="nation", text_auto=True)
fig.show()

Both examples are from this website
https://plotly.com/python/bar-charts/

How can I get the card to use the y values of the series as text labels?

[dbuezas]

Got it, texttemplate is what you need
https://plotly.com/javascript/texttemplate/

The template variable for the value is %{y}

[dbuezas]

See #131, I think it contains exactly what you are after