Apexcharts-card yaxis label config

Configuration Frontend
1

I have searched for an answer to this and experimented with a bunch of possible solutions, but nothing matches what I want or seems to work.

I have an exhaust fan plugged into a smart plug that I control based on room temperature from another sensor. I have a chart that shows when the fan is on and off, which isn’t great, but does the job. What I want to do is replace the y-axis values of 1 and 0 with string values “On” and “Off.” It’s purely a cosmetic detail, but It’s something I would like and would appreciate any suggestions.

exhaust_fan

type: custom:apexcharts-card
update_interval: 5min
graph_span: 4h
apex_config:
  chart:
    height: 150px
  yaxis:
    - show: true
      tickAmount: 1
      min: 0
      max: 1
header:
  show: true
  title: Exhaust Fan
  show_states: true
  colorize_states: false
series:
  - entity: switch.exhaust_fan_local
    color: green
    opacity: 1
    type: area
    stroke_width: 1
    curve: stepline
    transform: "return x === 'on' ? 1 : 0;"
    show:
      legend_value: false
      in_header: false
    fill_raw: last
2

Maybe this:

https://github.com/RomRider/apexcharts-card?tab=readme-ov-file#yaxis-options-multi-y-axis

brave_screenshot_github.com
brave_screenshot_github.com841×101 3.98 KB

Then use the format option, last example on the page, https://apexcharts.com/docs/options/yaxis/

3

I have been over that document repeatedly, but fail to see how it relates to my situation. Maybe I just don’t understand it. If you could explain how to apply it to my code, I would appreciate it.

4

Change the series entity. I used one of mine to test:

brave_screenshot_96zke8stt3d3i25a3vbdumw0vrkeb2ie.ui.nabu.casa (1)
brave_screenshot_96zke8stt3d3i25a3vbdumw0vrkeb2ie.ui.nabu.casa (1)994×612 26.2 KB

type: custom:apexcharts-card
graph_span: 4h
apex_config:
  yaxis:
    tickAmount: 1
    labels:
      formatter: |
        EVAL:function(value) {
          return value === 1 ? 'On' : 'Off';
        }
header:
  show: true
  title: Fan Required
series:
  - entity: binary_sensor.ensuite_fan_required
    opacity: 1
    type: area
    curve: stepline
    stroke_width: 1
    transform: "return x === 'on' ? 1 : 0;"
    show:
      legend_value: false
      in_header: false
    fill_raw: last
1 Like
5

Awesome! I had something similar at one point, but my spacing or syntax must have been slightly off. Thank you!

1 Like
6

Thank you for the solution. I hope it’s not too much to ask, but is there a way to do the same thing with the legend value? It’s still showing 1 or 0. If not, I can live with it the way it is, but I’d like to be able to show it as on or off.

7

Looks like it should be possible.

https://apexcharts.com/docs/options/legend/

image
image939×561 10.2 KB

type: custom:apexcharts-card
graph_span: 4h
apex_config:
  yaxis:
    tickAmount: 1
    labels:
      formatter: |
        EVAL:function(value) {
          return value === 1 ? 'On' : 'Off';
        }
  legend:
      showForSingleSeries: true
      formatter: |
        EVAL:function(value) {
          return value === 1 ? 'On' : 'Off';
        }
header:
  show: true
  title: Fan Required
  show_states: true
series:
  - entity: binary_sensor.ensuite_fan_required
    opacity: 1
    type: area
    curve: stepline
    stroke_width: 1
    transform: "return x === 'on' ? 1 : 0;"
    show:
      legend_value: true
      in_header: false
    fill_raw: last

brave_screenshot_96zke8stt3d3i25a3vbdumw0vrkeb2ie.ui.nabu.casa
brave_screenshot_96zke8stt3d3i25a3vbdumw0vrkeb2ie.ui.nabu.casa1007×768 32.8 KB

8

Thanks! It changed the legend value of all my entities, but I’ll play with it and try to figure out how to apply it to just the one.

9

Update: I failed. It looks like it’s either all or none.