Color y-axis label apexcharts

Configuration Frontend
1

I am not sure if this is the right place to ask this, but if not, please be kind and direct me to the best place.

Getting started with Home Assistant and Apexcharts. I would like to set the color of the text of each of the y-axis’s label sets, so for example, the y-axis values associated with the series that is shown as a green line is also green and the y-axis associated with a series that has a blue line is also blue. So far unablke to find anything for that in the doc (that works for me) or any examples.

THANKS!

2

try this

type: 'custom:apexcharts-card'
apex_config:
  chart:
    foreColor: '#FFFFFF' # Set text color to white
3

Thanks @tmjpugh

I tried that and no joy. Tries including the foreColor in the respective y-axis section (and other places), but no luck. See here:

series:
  - entity: sensor.yambms_yambms_1_total_voltage_o
    name: Voltage
    color: 1ed797
    stroke_width: 2
    yaxis_id: left-volts
    float_precision: 2
  - entity: sensor.yambms_yambms_1_battery_soc
    name: SoC
    color: 71c7ec
    stroke_width: 2
    yaxis_id: right-soc
apex_config:
  stroke:
    show: true
  legend:
    show: false
  dataLabels:
    enabled: true
  chart:
    height: 200px
yaxis:
  - id: left-volts
    opposite: false
    decimals: 1
    min: 44
    max: 54
    apex_config:
      forceNiceScale: true
      tickAmount: 5
      foreColor: 71c7ec
  - id: right-soc
    opposite: true
    decimals: 0
    min: ~40
    max: 100
    apex_config:
      forceNiceScale: true
      tickAmount: 6
      range: 20
4

Hey @peteDDD,

I had the same requirement and could not find a solution.
So I checked the ApexCharts JS library.
https://apexcharts.com/docs/options/yaxis/
Looks like the ApexChart configuration is the same as in HA.

Simply add:

    apex_config:
      labels:
        style:
          colors: #hexa color or named color

to your yaxis definition.
Here is my configuration for temperature and humidity sensor graph.

HTH!

type: custom:apexcharts-card
yaxis:
  - id: Temp
    min: 5
    max: 30
    apex_config:
      labels:
        style:
          colors: orange
  - id: Humi
    min: 5
    max: 95
    opposite: true
    apex_config:
      labels:
        style:
          colors: lightblue
header:
  show: false
  title: Raumklima
  show_states: true
  colorize_states: true
update_interval: 1m
span:
  start: day
series:
  - entity: sensor.bthome_sensor_eac0_temperature
    color: orange
    extend_to: false
    stroke_width: 2
    yaxis_id: Temp
  - entity: sensor.bthome_sensor_eac0_humidity
    color: lightblue
    extend_to: false
    stroke_width: 2
    yaxis_id: Humi

image
image846×644 68.6 KB