Change font family of labels in piechart and linechart in chartjs

Question

I want to change font of legend and labels in line chart and pie-chart how can i do it ? i almost try everything but unfortunately nothing work i try below ways :

even try css :

.piechart-parent-div{
    font-family:"IranYekanFa" !important;
}

nothing work !

user_8682983 · Answer

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

Change font family of labels in piechart and linechart in chartjs

1 Answers