Chartjs-How to set the serifs on the X and Y axes?

by

0👍

options -> axes -> ticks have font properties, which you can set/change before or afterwards.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'some numbers',
            data: [5, 1, 3, 2, 4, 1],
			backgroundColor: ["red", "blue", "yellow", "green", "purple", "orange"],
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            yAxes: [{
                ticks: {
                    fontSize: "14"
                }
            }]
        }
    }
});

document.getElementById("testbtn").addEventListener("click", function() {
	myChart.options.scales.yAxes[0].ticks.fontStyle = "bold";
	myChart.options.scales.xAxes[0].ticks.fontFamily = "Verdana";
	myChart.options.scales.xAxes[0].ticks.fontColor = "red";
	myChart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart" height="50"></canvas>
  <br>
  <button id="testbtn">change font</button>

Leave a comment