[Chartjs]-Can't change the default color and font size of labels in react-chartjs-2

by

2👍

✅

I would asume you are using v3, in v3 the scales have been reworked in how you write them, you can read all changed in the migration guide, to know for sure where to put the options and how there name is you can just check the documentation itself

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: {
    scales: {
      y: {
        ticks: {
          color: 'red',
          font: {
            size: 14,
          }
        }
      },
      x: {
        ticks: {
          color: 'red',
          font: {
            size: 14
          }
        }
      }
    }
  }
}

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