Changing fontFamily on ChartJS bar chart

Question

I've partially implemented ChartJS in a project, but I can't figure out how to change the font that's displayed on the X and Y axes of a bar chart.

I've read the ChartJS documentation, searched for examples on GitHub, etc. I'm not sure what I'm doing wrong, but I rest assured knowing the solution will involve a line of code and will be a startlingly stupid oversight on my part.

This code draws the chart I want, but with the default font:

var barChartLanguage = Chart.Bar(myCanvas, {
    data: dataLanguages,
    options: options,
    defaults: defaults
});

I tried changing the font in the defaults without success:

var defaults = {
    global: {
        // example font
        defaultFontFamily: "'Raleway'"
    }
};

And I tried changing it on the axis with options:

var options = {
    animation: {
        duration: 2000
    },
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true,   // minimum value will be 0.
                suggestedMax: 10
            },
            gridLines: {
                display: false
            },
            pointLabels: {
                fontFamily: "'Raleway'"
            }
        }],
        xAxes: [{
            gridLines: {
                display: false
            }
        }],
    },
};

Answer 1

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;
                    },
                },
            }
        }
    }
});

Answer 2

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/