How to change the font size of yAxis ticks in chartJs?

👍:0

The way scales options and font options are defined have been changed in chart.js v3 along with some other breaking changes, please read the migration guide: https://www.chartjs.org/docs/master/getting-started/v3-migration.html

To change the font size of the ticks you have to define a font opbject in the ticks with a different way of defining the scale.

Live example:

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
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          font: {
            size: 20
          }
        }
      },
      x: {
        ticks: {
          font: {
            size: 20
          }
        }
      }
    }
  }
}

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.4.0/chart.js"></script>
</body>

Custom tooltip in Chart.js

👍:-1

You can use like this

scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                fontSize: 40
            }
        }]
    }

Here is the code which can help you.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>

 <div class="container
 <div class="row">
   <div class="col-md-1"></div>
    <div class="col-md-10">
     <canvas id="myChart"></canvas>
  </div>
  <div class="col-md-1"></div>
 </div>
</div>

<script type="text/javascript">
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext('2d');

Chart.defaults.global.defaultFontColor = 'dodgerblue';
Chart.defaults.global.defaultFontSize = 16;
var data = {
 labels: ["Vanilla", "Chocolate", "Strawberry"],
  datasets: [
    {
        label: "Ice Cream Sales ",
        fill: true,
        backgroundColor: [
            'moccasin',
            'saddlebrown',
            'lightpink'],
        data: [11, 9, 4]
    }
  ]
};

var options = {
    title: {
              display: true,
              text: 'Ice Cream Truck Report',
              position: 'bottom'
          },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                fontSize: 40
            }
        }]
    }
 };

  var myBarChart = new Chart(ctx, {
   type: 'bar',
   data: data,
   options: options
  });

 </script>

Leave a comment Cancel reply