I have tried to apply some basic CSS overrides using a custom theme, and have successfully set the title text color, and gridline color using the following CSS overrides:
/* Define common apexcharts styling that makes default charts look better in all themes */
.apexcharts-gridline {
stroke: var(--neutral-70);
}
.apexcharts-xaxis-tick {
stroke: var(--neutral-70);
}
.apexcharts-yaxis-tick {
stroke: var(--neutral-70);
}
/* Set grid rows fill color to transparent across the board */
.apexcharts-grid-row {
fill: transparent;
}
/* Ensure all text is based off theme neutral varibles so it works with light & dark themes */
.apexcharts-title-text {
fill: var(--neutral-100);
}
However I can't get the following working, even after drilling down in the browser using developer tools to find the appropriate classes.
/* CAN'T GET THESE WORKING */
.apexcharts-text apexcharts-yaxis-label {
fill: var(--neutral-80);
}
.apexcharts-text apexcharts-yaxis-title-text {
fill: var(--neutral-80);
}
.apexcharts-yaxis-title {
fill: var(--neutral-100);
}
.apexcharts-yaxis-text-g{
fill: var(--neutral-80);
}
.apexcharts-xaxis-title {
fill: var(--neutral-100);
}
.apexcharts-xaxis-text-g{
fill: var(--neutral-80);
}
Any help would be much appreciated. I really don't want to have to bind some of these things to the chart options Style properties on every Apex Chart i create.
I can't quite figure out why some of the CSS overrides work and some don't.. I'm sure it is something silly.