Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js change label font color

I have a simple chart using http://www.chartjs.org like :

<script>
        var canvas = document.getElementById('myChart2');
        var data = {
            labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
            datasets: [{
                label: "My First dataset",
                backgroundColor: "rgba(179,181,198,0.2)",
                borderColor: "rgba(179,181,198,1)",
                pointBackgroundColor: "rgba(179,181,198,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(179,181,198,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            }, {
                label: "My Second dataset",
                backgroundColor: "rgba(255,99,132,0.2)",
                borderColor: "rgba(255,99,132,1)",
                pointBackgroundColor: "rgba(255,99,132,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(255,99,132,1)",
                data: [28, 48, 40, 19, 96, 27, 100]
            }]
        };
        var option = {
            showLines: false
        };
        var myLineChart = Chart.Radar(canvas, {
            data: data,
            options: option
        });
    </script>

I'm looking for in the documentation but I don't find how to change all labels color ?

In my exemple I need to change color of labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"] or label: "My First dataset",

Any ideas ?

like image 327
Clément Andraud Avatar asked Dec 10 '22 16:12

Clément Andraud


2 Answers

/*Global settings*/
    Chart.defaults.global.defaultFontColor = '#fff';
like image 74
Yur D Avatar answered Dec 17 '22 17:12

Yur D


If anyone is using ng2-charts with Typescript:

in the Component:

private lineChartOptions:any = {
    legend : {
        labels : {
          fontColor : '#ffffff'  
        }
    }
};

In the template:

<canvas baseChart [options]="lineChartOptions"></canvas>
like image 30
Stefan Cronje Avatar answered Dec 17 '22 15:12

Stefan Cronje