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 ?
/*Global settings*/
Chart.defaults.global.defaultFontColor = '#fff';
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With