Set Y axis range manually

[nnorbi99]

Hi. I have a pretty simple chart which I would like to customize. I have two problems.
The first one:
I would like to set the Y axis range manually always after pushing one of the buttons. But when I zoom in or out with mouse wheel, the Y range should be not set -> therefor autorange_after_scroll:true is not a good solution.

Now what I reached is, when I push the button twice, the result is what I want. The first pushing changes the visible range according to the button, and the second one set the right Y axis range. But I would like to have it for one push. And because this solution is not working for the ‘<’ and ‘>’ buttons. Unfortunately, I’m not so familiar with JavaScript. I spent many hours to solve this problem, but without result.

The second problem is, when I use fill:tozeroy, the min value of the Y range is set to 0 when I open or refresh the HA page.

Here is my code:

type: custom:plotly-graph
hours_to_show: 24
entities:
  - entity: sensor.watermeter_value
    mode: lines+markers
    name: ''
    line:
      shape: linear
      color: orange
      width: 2
    //fill: tozeroy
    fillcolor: rgba(255, 165, 0, 0.2)
    marker:
      color: orange
      size: 4
fn: |
  $fn({getFromConfig, vars})=> {
    const range = getFromConfig("visible_range");
    const width = range[1] - range[0];
    const date_from = new Date(getFromConfig('visible_range')[0]);
    const date_to = new Date(getFromConfig('visible_range')[1]);
    const all = getFromConfig("entities").flatMap(({ x, y }) => x.map((xi, i) => [xi, y[i]]).filter(([d, v]) => d >= date_from && d <= date_to).map(([d, v]) => v));    
    const allfilt = all.filter(val => !isNaN(val) && val !== null);
    vars.scroll = (label, p) => ({
      args: [
        {
          layout: {
            "xaxis.range": [range[0] + width*p, range[1] + width*p],
            "yaxis.range": [Math.min(...allfilt)-((Math.max(...allfilt)-Math.min(...allfilt))/10), Math.max(...allfilt)+((Math.max(...allfilt)-Math.min(...allfilt))/10)],
          }
        }, {
          transition: {
            duration: 150,
          }
        }
      ],
      label,
      method: "animate",
    })
    vars.zoom = (label, h) => ({
      args: [
        {
          layout: {
            "xaxis.range": [Date.now()-1000*60*60*h, Date.now()],
            "yaxis.range": [Math.min(...allfilt)-((Math.max(...allfilt)-Math.min(...allfilt))/10), Math.max(...allfilt)+((Math.max(...allfilt)-Math.min(...allfilt))/10)],
          }
        }
      ],
      label,
      method: "animate",
    })
  }
layout:
  title:
    font:
      size: 24
      family: arial
    text: Watermeter
    x: 0.1
    'y': 1
  height: 350
  slider:
    bordercolor: red
  showlegend: true
  legend:
    'y': 0.83
    orientation: h
    entrywidth: 0
    entrywidthmode: fraction
    title:
      text: $ex hass.states["sensor.watermeter_value"].state
    font:
      size: 20
      color: orange
      family: arial
  hovermode: x
  yaxis:
    griddash: dot
    showline: false
    autoshift: true
    anchor: free
    ticks: ''
    title: null
  xaxis:
    showgrid: false
    showspikes: true
    spikecolor: lightgrey
    spikedash: dot
    spikemode: across
    spikethickness: 2
  margin:
    t: 80
    l: 40
    r: 30
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -.5)
        - $fn({vars}) => vars.scroll( '>', .5)
      direction: right
      active: -1
      pad:
        r: 0
        t: 0
      type: buttons
      x: 1
      xanchor: right
      'y': 1.18
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '1y', 24*365)
        - $fn({vars}) => vars.zoom( '1m', 24*30)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '1d', 24)
        - $fn({vars}) => vars.zoom( '3h', 3)
        - $fn({vars}) => vars.zoom( '1h', 1)
      direction: right
      active: -1
      pad:
        r: 0
        t: 0
      type: buttons
      x: 0
      xanchor: left
      'y': 1.18
      yanchor: top

[dbuezas]

Hi there 👋
I'm not sure I fully understand what you have in mind, but you can make the y-axis non-zoomable like this:

layout:
  yaxis:
    fixedrange: true

[dbuezas]

Here's a wacky idea: make the button chang the range of an unused axis (e.g xaxis2) too. Then use a $ex or $fn to set the yrange, and read the data from there. I'm not sure this would work but it is worth a try

[nnorbi99]

I tried something, but without result. I'm not an JS expert :(
Can you give me an example code for this?

[dbuezas]

oh, nevermind this wouldn't work, the parser can't extract things from plotly objects anyway.

[nnorbi99]

In between I found the almost best solution. With this one I can see when the sensor had problem.

type: custom:plotly-graph
hours_to_show: 72
entities:
  - entity: sensor.watermeter_value
    mode: lines+markers
    name: ''
    line:
      shape: hv
      color: orange
      width: 2
    fill: tozeroy
    fillcolor: rgba(255, 165, 0, 0.2)
    marker:
      color: orange
      size: 6
    filters:
      - map_y: 'y === null ? 0 : y'
fn: |
  $fn({getFromConfig, vars})=> {
    vars.scroll = (label, p) => {
      const range = getFromConfig("visible_range");
      const width = range[1] - range[0];
      const newrange = [range[0] + width * p, range[1] + width * p];
      const date_from = new Date(newrange[0]);
      const date_to = new Date(newrange[1]);
      const all = getFromConfig("entities").flatMap(({ x, y }) => x.map((xi, i) => [xi, y[i]]).filter(([d, v]) => d >= date_from && d <= date_to).map(([d, v]) => v));    
      const allfilt = all.filter(val => !isNaN(val) && val !== null && val !== 0);   
      return {
        args: [
          {
            layout: {
              "xaxis.range": newrange,
              "yaxis.range": [Math.min(...allfilt) - ((Math.max(...allfilt) - Math.min(...allfilt)) / 10), Math.max(...allfilt) + ((Math.max(...allfilt) - Math.min(...allfilt)) / 10)],
            }
          }, {
            transition: {
              duration: 1500,
            }
          }
        ],
        label,
        method: "animate",
      }
    }
    vars.zoom = (label, h) => {
      const xrange = [Date.now()-1000*60*60*h, Date.now()];
      const date_from_zoom = new Date(xrange[0]);
      const date_to_zoom = new Date(xrange[1]);
      const allz = getFromConfig("entities").flatMap(({ x, y }) => x.map((xi, i) => [xi, y[i]]).filter(([d, v]) => d >= date_from_zoom && d <= date_to_zoom).map(([d, v]) => v));    
      const allzfilt = allz.filter(val => !isNaN(val) && val !== null && val !== 0);   
      const mmin = Math.min(...allzfilt);
      const mmax = Math.max(...allzfilt);
      const yrange = [mmin-((mmax-mmin)/10), mmax+((mmax-mmin)/10)];
      console.log(h);
      return {
        args: [
        {
          layout: {
            "xaxis.range": xrange,
           // "yaxis.range": yrange,
            "yaxis.autorange": true,
            "yaxis.autorangeoptions.include": 1000,
            "yaxis.uirevision": true,

            }
          }, {
            frame: {
              duration: 800,
            }
          }
        ],
        label,
        method: "animate",
      }
    }
  }
//title: Watermeter
layout:
  title:
    font:
      size: 24
      //color: orange
      family: arial
    text: Watermeter
    x: 0.1
    'y': 1
  height: 350
  slider:
    bordercolor: red
  showlegend: true
  legend:
    'y': 0.83
    orientation: h
    entrywidth: 0
    entrywidthmode: fraction
    title:
      text: $ex hass.states["sensor.watermeter_value"].state
    font:
      size: 20
      color: orange
      family: arial
  //paper_bgcolor: transparent
  //plot_bgcolor: transparent
  hovermode: x
  yaxis:
    //uirevision: false
    //autorange: max
    range: |
      $fn ({ getFromConfig }) => {
        const range = getFromConfig("visible_range");
        const date_from = new Date(range[0]);
        const date_to = new Date(range[1]);
        const all = getFromConfig("entities").flatMap(({ x, y }) => x.map((xi, i) => [xi, y[i]]).filter(([d, v]) => d >= date_from && d <= date_to).map(([d, v]) => v));    
        const allfilt = all.filter(val => !isNaN(val) && val !== null && val !== 0);   
        return [
          Math.max(Math.min(...allfilt) - ((Math.max(...allfilt) - Math.min(...allfilt)) / 10)),
          Math.min(Math.max(...allfilt) + ((Math.max(...allfilt) - Math.min(...allfilt)) / 10))
        ]
      }
    //gridcolor: transparent
    griddash: dot
    showline: false
    //linecolor: transparent
    autoshift: true
    anchor: free
    //showgrid: false
    //showspikes: true
    ticks: ''
    title: null
  xaxis:
    //gridcolor: transparent
    //griddash: dot
    showgrid: false
    showspikes: true
    spikecolor: lightgrey
    spikedash: dot
    spikemode: across
    spikethickness: 2
  margin:
    t: 80
    l: 40
    r: 30
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -.5)
        - $fn({vars}) => vars.scroll( '>', .5)
      direction: right
      active: -1
      pad:
        r: 0
        t: 0
      type: buttons
      x: 1
      xanchor: right
      'y': 1.18
      yanchor: top
      bgcolor: rgba(255, 165, 0, 0.1)
    - buttons:
        - $fn({vars}) => vars.zoom( '1y', 24*365)
        - $fn({vars}) => vars.zoom( '1m', 24*30)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '1d', 24)
        - $fn({vars}) => vars.zoom( '3h', 3)
        - $fn({vars}) => vars.zoom( '1h', 1)
      direction: right
      active: -1
      pad:
        r: 0
        t: 0
      type: buttons
      x: 0
      xanchor: left
      'y': 1.18
      yanchor: top
      bgcolor: rgba(255, 165, 0, 0.1)
//autorange_after_scroll: true

And here is how it looks like:

One thing is still missing: Howertext for mobile/touch devices. But I know, this is missing from Plotly for now.

[dbuezas]

Null values would usually show as gaps, but since you are showing multiple days and using fill they are probably not visible. Good solution!