How I can change the font-family of labels in the bar chart?

Question

I'm using Chart.js library to create a chart, and now I'm trying to change the labels font-family to Montserrat. It worked for ticks, but not for the labels and the X-axe:

Here is my configuration:

var doughnutChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Blue', 'Red', 'Yellow', 'Green'],
    datasets: [
      {
        backgroundColor: ['#059CFF', '#FF6384', '#FFD673', '#22CECE'],
        data: pieChartData[1].data,
      },
    ],
  },
  options: {
    responsive: false,
    legend: {
      display: false,
      labels: {
        fontFamily: 'Montserrat, sans-serif',
        fontColor: 'red'

      }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            fontFamily: 'Montserrat, sans-serif',
          },
        },
      ],
    },
  },
});

How can I change the font-family of the labels at the bottom?

JSFiddle : https://jsfiddle.net/t7bzg9aL/

Answer 1

Looks like you're missing the x-axis font settings:

var doughnutChart = new Chart(ctx, {
    ...

    scales: {
      ...
      xAxes: [
        {
          ticks: {
            fontFamily: 'Montserrat, sans-serif',
          },
        },
      ],
    },
  },
});

Here is the demo: https://jsfiddle.net/mbratch/wxgry4p2/1/

But you could set the default font for the whole chart if that's the desired result:

Chart.defaults.global.defaultFontFamily = 'Montserrat, sans-serif';

var doughnutChart = new Chart(ctx, {
    ...   // no need to set font family in here
});

Demo: https://jsfiddle.net/mbratch/wxgry4p2/2/