Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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".

like image 407
Julien L Avatar asked Feb 05 '23 05:02

Julien L


1 Answers

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()),
                    },
                },
            }
        });
like image 98
Mickaël Avatar answered Feb 07 '23 19:02

Mickaël