Stacked graphs with more than one y axis

[caiusseverus]

I have a graph that currently plots four different sensors. There are three different units and scales, so there are three y axes. It looks like this:

I want to break the price one out into a separate plot, so that I have one y axis on a plot above, and the other two y axes on the plot below.

I can separate them all out into individual plots using the grid function and rows set to 3, however if I set rows to 2 then there is no output produced. Is there a way to assign a particular y axis to a particular row?

[dbuezas]

Yes there is: yaxis: y2 inside the entity.
By default entities are group together by unit_of_measurement, but you can override that with yaxis: y, yaxis: y2, yaxis: y3 ... etc

[caiusseverus]

Yeah I'd already done that to assign each entity to the different y axes. It doesn't affect which row the individual y axes are assigned to though.

I've actually figured out how to do it now - the answer is with the overlaying switch:

Here is the yaml for reference if someone else is looking how to do it:

type: custom:plotly-graph
title: Month Electricity Consumption
hours_to_show: current_month
config:
  displayModeBar: false
layout:
  height: 750
  dragmode: false
  legend:
    orientation: h
    itemsizing: constant
    font:
      size: 8
  grid:
    rows: 2
    columns: 1
    roworder: bottom to top
  xaxis:
    visible: true
    fixedrange: true
  yaxis:
    visible: true
    fixedrange: true
    rangemode: tozero
    title: Consumption (kWh)
    side: left
    showgrid: true
    domain:
      - 0
      - 0.775
  yaxis2:
    visible: true
    rangemode: tozero
    showgrid: true
    fixedrange: true
    overlaying: y2
    side: left
    title: £/kWh
    domain:
      - 0.8
      - 1
  yaxis3:
    visible: true
    fixedrange: true
    rangemode: tozero
    title: Cost (£)
    overlaying: 'y'
    side: right
    anchor: x
  yaxis9:
    visible: false
    fixedrange: true
entities:
  - entity: sensor.electric_meter_month
    name: Week
    line:
      color: rgba(52,152,219,1)
      width: 2
      shape: linear
    show_value: true
    yaxis: y1
  - entity: sensor.electric_meter_month
    yaxis: y1
    time_offset: 1M
    name: '-1m'
    line:
      color: rgba(52,152,219,0.5)
      width: 2
      shape: linear
      dash: dot
  - entity: sensor.octopus_current
    internal: true
    name: Price
    connectgaps: true
    line:
      color: rgba(255,0,0,1)
      width: 1
      shape: hv
    yaxis: y2
    show_value: true
  - entity: sensor.octopus_current
    internal: true
    name: Price -1 month
    time_offset: 1M
    connectgaps: true
    line:
      color: rgba(255,0,0,0.75)
      width: 1
      dash: dot
      shape: hv
    yaxis: y2
  - entity: sensor.electricity_monthly_energy_cost
    name: Cost
    yaxis: y3
    line:
      color: green
      width: 2
      shape: linear
    show_value: true
  - entity: sensor.electricity_monthly_energy_cost
    name: Cost -1 month
    time_offset: 1M
    yaxis: y3
    line:
      color: rgba(0,255,0,0.4)
      width: 2
      shape: linear
      dash: dot
  - entity: sensor.electricity_monthly_energy_cost_2
    name: SVT cost
    yaxis: y3
    line:
      color: darkorange
      width: 2
      shape: linear
    show_value: true
  - entity: sensor.octopus_current
    name: Price (Max)
    statistic: max
    period: day
    showlegend: false
    line:
      color: rgba(81, 117, 159, 0.4)
      width: 1
      shape: spline
    yaxis: y2
  - entity: sensor.octopus_current
    name: Price (Min)
    statistic: min
    period: day
    fill: tonexty
    fillcolor: rgba(81, 117, 159, 0.2)
    line:
      color: rgba(81, 117, 159, 0.4)
      shape: spline
    yaxis: y2
  - entity: sensor.octopus_current
    name: Price (Mean)
    statistic: mean
    period: day
    texttemplate: ' %{y:.4f}'
    line:
      color: rgba(143, 86, 164, 1)
      width: 1
      shape: spline
    showlegend: false
    show_value: true
    yaxis: y2
  - entity: ''
    name: Now
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $fn () => [Date.now(), Date.now()]
    'y': $fn () => [0,1]
view_layout:
  position: main