Clément Andraud
Clément Andraud

Reputation: 9269

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 ?

Upvotes: 3

Views: 15403

Answers (2)

Stefan Cronje
Stefan Cronje

Reputation: 188

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>

Upvotes: 5

Yur D
Yur D

Reputation: 504

/*Global settings*/
    Chart.defaults.global.defaultFontColor = '#fff';

Upvotes: 8

Related Questions