CODEWITHSUNDEEP
javascriptchart.js
Alvaro
Alvaro

Reputation: 41595

Change X and Y axis font color

How can I change the color of the X and Y axes labels? I was trying to use fontColor within scaleLabel but I might be doing it in the wrong place ?

I tried applying it within scale as can be found on the source code. I also tried under scales and even within xAxes.

var options = {
type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'red',
            borderWidth: 1
        }]
    },
    options: {
        scale: {
            scaleLabel:{
                fontColor: 'red'
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
 };

Reproduction online

enter image description here

I've been checking the documentation but it doesn't seem to be very clear to me. And as chart.js doesn't provide enough examples, it is not easy to find out things sometimes...

Upvotes: 29

Views: 46771

Answers (5)

Trilok Pathak
Trilok Pathak

Reputation: 3101

I might be late to this question, but this answer may be useful for people who are looking for the answers.

In Chart.js, to style the scale label and ticks we can use the below settings.

options: {
    scales: {
        xAxes: [{
            display: true,
            scaleLabel: { // To format the scale label
                display: true,
                labelString: 'X axis name',
                fontColor: '#000000',
                fontSize: 10
            },
            ticks: {
                fontColor: "black", // To format the ticks, coming on the axis/labels which we are passing
                fontSize: 14
            }
        }],
        yAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Y axis name',
                fontColor: '#000000',
                fontSize: 10
            },
            ticks: {
                fontColor: "black",
                fontSize: 14
            }
        }]
    }
}

Please refer to the Chart.js documentation for all the properties. Study all the properties before doing your implementation.

Happy coding!

Upvotes: 4

Tiffany
Tiffany

Reputation: 503

React JS - Create React App

"chart.js": "^3.7.0",
"react-chartjs-2": "^4.0.0",

I struggled with this problem, unfortunately accepted answer did not work for me, but then I tweaked it little bit and made it work.

Here is what I ended up with, hope this will be helpful for someone...

enter image description here

const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            position: 'top',
            labels: {
                color: "#ffffff",
            }
        },
        title: {
            display: true,
            text: 'License Usage',
            color: "#ffffff"
        },
    },
    scales: {
        yAxes: {
            ticks: {
                color: "#ffffff"
            },
        },
        xAxes: {
            ticks: {
                color: "#ffffff"
            },
        }
    },
};

Upvotes: 3

João Paulo
João Paulo

Reputation: 6670

To change your chart object ticks and axes labels, do like so:

let changeItemColor = (item) => {
    item.scaleLabel.fontColor = color;
    item.ticks.fontColor = color;
    item.ticks.minor.fontColor = color;
    item.ticks.major.fontColor = color;
};
chart.options.scales.xAxes.forEach((item) => changeItemColor(item));
chart.options.scales.yAxes.forEach((item) => changeItemColor(item));
chart.update();

Upvotes: 0

Rahul
Rahul

Reputation: 1

if we set the options as below then the font color of axes label values changes. For example I tried it on jsfiddle and it worked. The same also worked for my chart in rails app. ...

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                fontColor:'red'
            }
        }]
    }
}

...

Upvotes: 0

Sahil
Sahil

Reputation: 3358

$(function(){
var ctx = document.getElementById("myChart");
//Chart.defaults.global.defaultFontColor='red';
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
       legend:{labels: {fontColor: 'orange'}},
      title: {
            display: true,
            fontColor: 'blue',
            text: 'Custom Chart Title'
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    fontColor: 'red'
                },
            }],
          xAxes: [{
                ticks: {
                    fontColor: 'green'
                },
            }]
        } 
        
    }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

You can use fontColor inside ticks/label/legend:labels for a particular axis,

options: {
        legend: {
             labels: {
                  fontColor: 'orange'
                 }
              },
        title: {
            display: true,
            fontColor: 'blue',
            text: 'Custom Chart Title'
        }     ,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    fontColor: 'red'
                },
            }],
          xAxes: [{
                ticks: {
                    fontColor: 'green'
                },
            }]
        } 

    }

or change the defaultFontColor to change font color of entire text elements drawn on the canvas. 

 Chart.defaults.global.defaultFontColor='red';

Upvotes: 53

Related Questions