Chart.js: Chart JS V2 Default Font Color not working

Created on 12 May 2016  路  4Comments  路  Source: chartjs/Chart.js

Can't get the defaultFontColor to work in my chart at all.

Really need help on this.

Thanks

javascript var ctx = document.getElementById("performance-chart").getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Jun", "July", "Aug", "Sept", "Oct", "Nov"], datasets: [ { fill: true, backgroundColor: 'rgba(169, 205, 221, 0.8)', borderColor: 'rgba(169, 205, 221, 0.8)', data: [5, 8, 6, 12, 10, 11] }, { fill: true, backgroundColor: 'rgba(64, 158, 192, 0.8)', borderColor: 'rgba(64, 158, 192, 0.8)', data: [10, 14, 8, 16, 15, 17] } ] }, options: { responsive: true, maintainAspectRatio: true, defaultColor: 'rgba(0,0,0,0.1)', defaultFontColor: '#fff', scales : { yAxes : [{ display: false, }] }, showLines : true, legend : { display: false }, elements : { line : { tension: 0, borderWidth: 0.1, fill: false }, point : { radius: 0, borderWidth: 0 } } } });```

support

Most helpful comment

Try the following near the top of your code:

var ctx = document.getElementById("performance-chart").getContext("2d");
Chart.defaults.global.defaultFontColor = '#fff';
Chart.defaults.global.defaultColor = 'rgba(0,0,0,0.1)';
var myChart = new Chart(ctx, {

All 4 comments

@radiusmediaaus
The default font color is global:
Chart.defaults.global.defaultFontColor

Ok thanks, still not sure where I am suppose to place this in the code above. Can you guide me please?

Try the following near the top of your code:

var ctx = document.getElementById("performance-chart").getContext("2d");
Chart.defaults.global.defaultFontColor = '#fff';
Chart.defaults.global.defaultColor = 'rgba(0,0,0,0.1)';
var myChart = new Chart(ctx, {

Thanks ! It works great !

Was this page helpful?
0 / 5 - 0 ratings