Wind direction with two y-axis

[jjvelar]

Hi!

I have created a very simple wind direction histogram but I don't know how to add a secondary y-axe so in the first one, on the left, it shows degrees, and the second one, on the right, it shows N, E, W and S.
I have added below a screenshot of what I'd like to replicate.
Thanks in advance for your help!

type: custom:plotly-graph
refresh_interval: auto
config:
  scrollZoom: false
  staticPlot: true
layout:
  yaxis:
    range:
      - 0
      - 360
defaults:
  entity:
    showlegend: true
    show_value: true
    line:
      width: 1
    filters:
      - sliding_window_moving_average:
          window_size: 10
          extended: false
          centered: true
hours_to_show: 24
time_offset: |-
  $fn ({ getFromConfig }) => {
    const ms_to_show = getFromConfig('hours_to_show') * 60 * 60 * 1000;
    const now_utc = Date.now() - new Date().getTimezoneOffset() * 60 * 1000;
    return ms_to_show - now_utc % ms_to_show + 'ms'
  }
entities:
  - entity: sensor.weather_station_wind_direction
    name: Wind direction
    mode: markers
    marker:
      size: 3
      color: royalblue
    type: scatter

[dbuezas]

Try with this:

layout:
 yaxis2:
  title: 'Cardinal Directions'
  overlaying: 'y'
  side: 'right'
  tickvals: [0, 90, 180, 270, 360]
  ticktext: ['North', 'East', 'South', 'West', 'North']

[jjvelar]

Thanks but it is not showing up.
That's my code:

type: custom:plotly-graph
refresh_interval: auto
config:
  scrollZoom: false
  staticPlot: true
layout:
  yaxis:
    range:
      - 0
      - 360
  yaxis2:
    overlaying: 'y'
    side: right
    tickvals:
      - 0
      - 90
      - 180
      - 270
      - 360
    ticktext:
      - "N"
      - "E"
      - "S"
      - "O"
      - "N"
defaults:
  entity:
    showlegend: true
    show_value: true
    line:
      width: 1
    filters:
      - sliding_window_moving_average:
          window_size: 10
          extended: false
          centered: true
hours_to_show: 24
time_offset: |-
  $fn ({ getFromConfig }) => {
    const ms_to_show = getFromConfig('hours_to_show') * 60 * 60 * 1000;
    const now_utc = Date.now() - new Date().getTimezoneOffset() * 60 * 1000;
    return ms_to_show - now_utc % ms_to_show + 'ms'
  }
entities:
  - entity: sensor.weather_station_wind_direction
    name: Wind direction
    mode: markers
    marker:
      size: 3
      color: royalblue
    type: scatter

And this how it is shown:

[jjvelar]

Don´t think it is the most elegant solution, but adding a second "fake" entity and assigning it to the second axis did the trick:

  - entity: ''
    name: ''
    showlegend: false
    show_value: false
    color: ''
    yaxis: y2

Is there a better way to do it?

[dbuezas]

oh nice! I think you can synchronise axes too

[jjvelar]

Thanks!
How can I synchronize axes?

[dbuezas]

I don't remember, I suggest you google or AI it. :)

[jjvelar]

Will try and come back with my findings.