[Chartjs]-Change font family of labels in piechart and linechart in chartjs

by

1👍

✅

Since the font does not change it seems you are working with V3, v3 has some major braking changes like how scales got defined and changes in namespaces so are your title and legend config in the wrong place, also the way you define the font is wrong, for all the changes please read the migration guide.

Working example of changed font:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          font: {
            family: 'Comic Sans MS',
          }
        }
      },
    },
    scales: {
      x: {
        ticks: {
          font: {
            family: 'Comic Sans MS'
          },
          reverse: false
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Leave a comment