[Chartjs]-Changing fontFamily on ChartJS bar chart

by

26👍

✅

Add ticks.fontFamily to xAxes so it will look like this:

xAxes: [{
  gridLines: {
    display: false
  },
  ticks: {
    fontFamily: "Verdana",
  }
}],

Documentation: http://www.chartjs.org/docs/#scales

Example on jsfiddle: http://jsfiddle.net/4asLpwd5/

10👍

From version 3.x, onwards the syntax was changed.

Chart.js migration guide: 3.x Migration Guide

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false,
            }
        },
        scales: {
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    font: {
                        family: 'Raleway', // Your font family
                        size: 14,
                    },
                },
            },
            y: {
                beginAtZero: true,
                ticks: {
                    font: {
                        family: 'Raleway', // Your font family
                        size: 14,
                    },
                    // Include a dollar sign in the ticks
                    callback: function (value, index, values) {
                        return '$' + value;
                    },
                },
            }
        }
    }
});

Leave a comment