How can I change the text color of an ApexCharts tooltip/label? The problem is the font color is too dark:
I've tried for the life of me reading through the ApexCharts docs for a solution, but all I could find was:
chart: {
foreColor: '#ffffff'
}
I tried it on my chart, but it had no effect.
Here are the complete settings for my chart:
var colors = [ "#008ffb", "#ffc300", "#0acf97", "#fa5c7c", "#e3eaef" ];
var options = {
chart: {
foreColor: '#ffffff',
height: 412,
type: "pie",
toolbar: {
show: true
}
},
series: [ 9890571, 5276166, 4810254, 3823869, 3463197 ],
labels: [ "CHINO DEVELOPMENT COMPANY", "SC DEVELOPMENT COMPANY, LLC", "RICHLAND, INC.", "SL DEVELOPMENT COMPANY, LLC", "BROOKCAL, LLC" ],
colors: colors,
legend: {
show: !0,
position: "bottom",
horizontalAlign: "center",
verticalAlign: "middle",
floating: !1,
fontSize: "14px",
offsetX: 0,
offsetY: 7
},
responsive: [{
breakpoint: 600,
options: {
chart: {
height: 240
},
legend: {
show: !1
}
}
}]
},
chart = new ApexCharts(document.querySelector("#simple-pie"), options);
chart.render();
The following CSS worked for me:
.apexcharts-tooltip span {
color: #ffffff;
}
Someone earlier had suggested a similar answer but had omitted the span selector. Without span, it doesn't work for me.