Question

134

Chart.js - Setting max Y axis value and keeping steps correct

rated 0 times [ 139] [ 5] / answers: 1 / hits: 21520 / 7 Years ago, mon, july 3, 2017, 12:00:00

I'm using Chart.js 2.6. I have a chart to which I've added custom pagination to step through the dataset, as it is quite large. My pagination and everything works great, I simply grab the next chunk of data in my set and update the chart.config.data with the new data object, and then call .update() on the chart. However, in order to make the chart make sense, I needed to keep the left (Y-axis) scale the same when the user is paginating through. Normally Chart.js would rebuild it based on the data in the chart, but I want it to always reflect the same values.

I've set the max value on the yAxes object of the chart to the maximum value in my data set. I've also set the beginAtZero option to true, and the maxTicksLimit to 10. However, even though my Yaxis does stay the same, it doesn't always look that great (see below screenshot). In this example, my max is set to 21,000 in the chart. Does anyone have any suggestions as to how I can either provide a better max (rounding up to next 5,000, 500, 100, etc based on the value) or some way to get it to create the Y axis without crunching the top number the way it does now?

Here is the function I currently use to determining the max data value to set as the max value in the Yaxes object in the chart. the plugin.settings.chartData variable represents an array of the data values used in the chart. I am trying to get it to increment correctly to the next 1000, 500, etc based on what the maxValue is, but as you can see my math is not correct. In the screenshot example, the maxValue is coming back as 20,750 and my function is rounding it up to 21,000. In this example it SHOULD round it up to the next increment which would be 25,000.

var determineMaxDataValue = function() {

    var maxValue = Math.max.apply(Math, plugin.settings.chartData);

    var step = maxValue > 1000 ? 1000 : 500;

    plugin.settings.maxDataValue = (Math.ceil(maxValue / step) * step);             

};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keana

Add To Favorites

Follow

Total Points: 452

Total Questions: 97

Total Answers: 81

Location: Barbados

Member since Sun, Nov 27, 2022

1 Year ago

answered 7 Years ago amari · Accepted Answer

Figured it out. Instead of supplying the max value on the Y Axis as I have been, I instead implemented the afterBuildTicks callback and updated the ticks to have the correct increments.

yAxes: [{

  afterBuildTicks: function(scale) {

  scale.ticks = updateChartTicks(scale);

    return;

  },

  beforeUpdate: function(oScale) {

    return;

  },

  ticks: {  

    beginAtZero:true,

    // max:plugin.settings.maxDataValue,

    maxTicksLimit: 10

  }

}]

my updateChartTicks function loops over the existing ticks and determines the correct increment amount between the ticks. Then I use that value to add my final tick which will always be greater than the largest data in the dataset.

var updateChartTicks = function(scale) {

  var incrementAmount = 0;

  var previousAmount = 0;

  var newTicks = [];

  newTicks = scale.ticks;

  for (x=0;x<newTicks.length;x++) {

    incrementAmount = (previousAmount - newTicks[x]);

    previousAmount = newTicks[x];   

  }

  if (newTicks.length > 2) {

    if (newTicks[0] - newTicks[1] != incrementAmount) {

      newTicks[0] = newTicks[1] + incrementAmount;                  

    }

  }         

  return newTicks;          

};