Question 73776 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to manipulate Y-Axis in ChartJS – Reactjs

I need to show in Y-Axis the labels of my max value in array from 0, 25%, 50%, 75% and 100% values.

My example max value is 100,000. Output in Y-Axis should be: 0, 25,000, 50,000, 75,000, 100,000.
Not sure what should I put in stepSize. For the max, I can filter the maxAmount in the array.

yAxes: [
  {
    ticks: {
      min: 0,
      max: ???
      beginAtZero: true,
      stepSize: ???,
      callback(value) {
        return `Php ${formatHelper.kFormatter(value)}`;
      },
    },
  },
],

Output in Y-Axis should be: 0, 25,000, 50,000, 75,000, 100,000.

Tags:

2

Answers


  1. 0

    set max to 100000 and stepSize to 25000

    yAxes: [
  {
    ticks: {
      min: 0,
      max: 100000,
      beginAtZero: true,
      stepSize: 25000,
      callback(value) {
        return `Php ${formatHelper.kFormatter(value)}`;
      },
    },
  },
],

    codepen exmaple

    Login or Signup to reply.
  2. 0

    we can use afterBuildTicks options to set our own ticks,

    • so first we filter the max value from data
    • set percentage values of max value in a different array
    • then set ticks using index of ticksArray in afterBuildTicks option
    var data =  [90000, 50000, 30000, 14040, 45000, 36000];  //data
var max = Math.max.apply(Math, data);  //find max value   (90000 here)
var ticksArray = [0, (max*25)/100, (max*50)/100, (max*75)/100, max ];  //percentage values (0, 25%, 50%, 75%, 100%) for y-axis ticks

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [
      "Tokyo",
      "Mumbai",
      "Mexico City",
      "Shanghai",
      "Sao Paulo",
      "New York",
      "Karachi",
      "Buenos Aires",
      "Delhi",
      "Moscow"
    ],
    datasets: [
      {
        label: "Series 1", 
        data: data,
      }
    ]
  },
  options: {
    responsive: true, 
    maintainAspectRatio: false,
    scales: {
      y: {
        max: 100000,
        min: 0,
        afterBuildTicks: scale => {   //this
          scale.ticks = [{
              value: ticksArray[0]    //use ticksArray here using index
            },{
             value: ticksArray[1]
            },
            {
              value: ticksArray[2]
            },
            {
              value: ticksArray[3]
            },
            {
              value: ticksArray[4]
            }
          ]
        }
      }
    }
  }
});
    .container {
  width: 600px;
  height: 600px;
  margin: 0 auto;

}
  #myChart {
    width: 100%;
    height: 100%;
  }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.0/chart.min.js"></script>
<div class="container">
  <canvas id="myChart"></canvas>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search