This Is How to Change the Color of the ApexCharts Line Graph Using card_mod

Configuration Frontend
1

In the documentation of apexcharts-card, it says:

Supported formats: yellow , #aabbcc , rgb(128, 128, 128) or var(--css-color-variable)

For those of you who would like to use other formats like color-mix, you can achieve this using card_mod:

card_mod:
  style: |
    .apexcharts-series:nth-of-type(1) path {
      stroke: color-mix(in srgb, var(--md-sys-color-primary-dark), var(--primary-color) 25%) !important;
    }

If you have multiple lines in your graph, simply copy and paste the selector and replace “(1)” with the respective numbers.

It took me hours as a noob to figure this out, especially since no one else seemed to have exactly the same problem.

1 Like