[Chartjs]-Change labels colors for radar chart js

by

1👍

✅

If you want to change all the points label color use the option pointLabelFontColor.

If you want to change points label color individually you have to change chart.js since it does not implement this feature.

Here are the chart.js modifications needed to achieve change points label color individually:

Change chart.js lines:

from:

ctx.fillStyle = this.pointLabelFontColor;

to:

ctx.fillStyle = this.labels[i].fillStyle;

and

from:

ctx.fillText(this.labels[i], pointLabelPosition.x, pointLabelPosition.y);

to:

ctx.fillText(this.labels[i].text, pointLabelPosition.x, pointLabelPosition.y);

and

from:

textWidth = this.ctx.measureText(template(this.templateString, { value: this.labels[i] })).width + 5;

to:

textWidth = this.ctx.measureText(template(this.templateString, { value: this.labels[i].text })).width + 5;

Your HTML should be:

<html>
<head>
    <title>Radar Chart - Example</title>
    <script type="text/javascript" src="chartjs/Chart.js"></script>
</head>

<body>
    <canvas id="myChart" width="400" height="400"></canvas>

    <script>

        var data = {
            labels: [{
                text: "Eating", 
                fillStyle: "#01A4E0"
            }, {
                text: "Drinking", 
                fillStyle: "#FFE897"
            }, {
                text: "Sleeping", 
                fillStyle: "#428e2a"
            }, {
                text: "Designing", 
                fillStyle: "#6b3a0d"
            }, {
                text: "Coding", 
                fillStyle: "#0d5e6b"
            },{
                text: "Cycling", 
                fillStyle: "#450d6b"
            },{
                text: "Running", 
                fillStyle: "#6b0d36"
            }],         

            datasets: [{
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            }, {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 96, 27, 100]
            }]
        };      

        var ctx = document.getElementById('myChart').getContext('2d');
        var myRadarChart = new Chart(ctx).Radar(data);

    </script>
</body>
</html>

If you use the same chart.js for other radar charts that would still use labels as arrays you can add support for both ways of setting labels (array and object) replacing the mentioned chart.js lines using these instead:

ctx.fillStyle = this.labels[i].fillStyle ? this.labels[i].fillStyle : this.pointLabelFontColor;


ctx.fillText((this.labels[i].text ? this.labels[i].text : this.labels[i]), pointLabelPosition.x, pointLabelPosition.y);


textWidth = this.ctx.measureText(template(this.templateString, { value: (this.labels[i].text ? this.labels[i].text : this.labels[i]) })).width + 5;

7👍

Based on Chart.js 2.7 documentation we may color labels with options.scale.pointLabels.fontColor :

        let tagsLabel = [ 'Axe1', 'Axe2', 'Axe3'];
        let chart = new Chart(targetNode, {
            type: 'radar',
            data: {
                labels: tagsLabel,
                datasets: [
                    {
                        data: [
                            0, 2,
                        ],
                    }
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'left'
                },
                title: {
                    display: true,
                    text: "It work's"
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                scale: {
                    // ticks: {
                    //     backdropColor: 'red',
                    //     // Include a dollar sign in the ticks
                    //     callback: function(value, index, values) {
                    //         return '$' + value;
                    //     }
                    // }
                    pointLabels: {
                        // callback: function(value, index, values) {
                        //     return '$' + value;
                        // }
                        fontColor: tagsLabel.map((lbl)=>randColor()),
                    },
                },
            }
        });

Leave a comment