CODEWITHSUNDEEP
javascriptchart.js
Julien L
Julien L

Reputation: 33

Change labels colors for radar chart js

I researched how to change label colors for my radar chart with chart.js. I tried scaleFontColor but that doesn't work for me.

var data = {
  labels: ["titi", "tata", "tutu"],

  datasets: [{
    fillColor: "rgba(51,49,90,0.5)",
    strokeColor: "rgba(255,255,255,1)",
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    data: [12, 18, 22]

  }]
};

var options = {
  responsive: true
};

var chart = document.getElementById('chart-area-x').getContext('2d');
new Chart(chart).Radar(data, options);

I want to put a specific color to "titi", "tata" and "tutu".

Upvotes: 3

Views: 12857

Answers (2)

Mickaël
Mickaël

Reputation: 940

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

Upvotes: 6

Fernando Ribeiro
Fernando Ribeiro

Reputation: 200

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;

Upvotes: 1

Related Questions