如何修改ApexCharts标签/提示框文本颜色？foreColor配置无效

当前遇到的问题是图表相关文本字体颜色过深，显示效果不佳：

查阅ApexCharts官方文档后，尝试添加全局前景色配置，但配置后没有任何效果，尝试的配置如下：

chart: {
    foreColor: '#ffffff'
}

当前使用的完整图表配置 #

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();

问题原因与解决方案 #

chart.foreColor是全局基础文本色配置，仅对坐标轴、图表标题等通用基础文本生效，提示框、数据标签、图例这类独立组件有单独的样式配置项，优先级高于全局配置，需要单独设置才能修改对应文本颜色：

• 提示框（tooltip）文本颜色：在tooltip.style节点下配置color属性
• 饼图扇区数据标签文本颜色：在dataLabels.style节点下配置colors属性
• 底部图例文本颜色：在legend.labels节点下配置colors属性

修改后可正常生效的完整配置参考：

var colors = [ "#008ffb", "#ffc300", "#0acf97", "#fa5c7c", "#e3eaef" ];
var options = {
        chart: {
            foreColor: '#ffffff',
            height: 412,
            type: "pie",
            toolbar: {
                show: true
            }
        },
        // 新增提示框文本样式
        tooltip: {
            style: {
                color: '#ffffff'
            }
        },
        // 新增扇区数据标签文本样式
        dataLabels: {
            style: {
                colors: ['#ffffff']
            }
        },
        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,
            // 新增图例文本颜色配置
            labels: {
                colors: '#ffffff'
            }
        },
        responsive: [{
            breakpoint: 600,
            options: {
                chart: {
                    height: 240
                },
                legend: {
                    show: !1
                }
            }
        }]
    },
    chart = new ApexCharts(document.querySelector("#simple-pie"), options);
chart.render();

如果需要单独设置tooltip标题、数值的不同颜色，可分别配置tooltip.title.style.color和tooltip.y.style.color实现更细粒度的样式控制。

内容的提问来源于stack exchange，提问作者GTS Joe