[Chartjs]-Change font size and font color in Chartjs Angular 5

by

2👍

✅

for changing the color of numbers and lines in coordinate plane,we can do:
for example in xAxes:

xAxes: [{
    gridLines: {
        display: true,
        color: "red" // this here     
    },
    ticks: {
        fontColor: "red", // this here     
    }
}],

and font and color of labels:

legend: {
    display: true,
    labels:{
        fontSize: 10,
        fontColor: 'red',
    }
},

DEMO.

0👍

You may try to edit the source code.
1. Go to the link /node_modules/chart.js/src/core/core.js in your node modules folder.
2. edit the following code i.e the core.js file. change the

defaultFontColor: ‘#0000ff’

to any color you want. I have implemented this in my code for pie chart. and it worked.

`

defaults._set('global', {

responsive: true,
responsiveAnimationDuration: 0,
maintainAspectRatio: true,
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
hover: {
    onHover: null,
    mode: 'nearest',
    intersect: true,
    animationDuration: 400
},
onClick: null,
defaultColor: 'rgba(0,0,0,0.1)',
defaultFontColor: '#0000ff',
defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
defaultFontSize: 12,
defaultFontStyle: 'normal',
showLines: true,

// Element defaults defined in element extensions
elements: {},

// Layout options such as padding
layout: {
    padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    }
}
});

module.exports = function() {

// Occupy the global variable of Chart, and create a simple base class
var Chart = function(item, config) {
    this.construct(item, config);
    return this;
};

Chart.Chart = Chart;

return Chart;
};`

Leave a comment