Skip to content

Instantly share code, notes, and snippets.

@ahmed-musallam
Created November 13, 2017 20:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahmed-musallam/21abd188e5773cc2c0ad486eaacef9a8 to your computer and use it in GitHub Desktop.
Save ahmed-musallam/21abd188e5773cc2c0ad486eaacef9a8 to your computer and use it in GitHub Desktop.
A ChartJs plugin to add offset to chart's min/max on the y axes

A ChartJs plugin to add offset to chart's min/max on the y axes

Take a look at this SF question for more details, see my answer.

how to use:

  1. Add code after chartjs code
  2. In chartsjs options set options.customOffset to any number you want to offset the chart
// based on my answer here: https://stackoverflow.com/questions/47146427
Chart.pluginService.register({
beforeUpdate: function(chart){
// get custom defined offset
var offset = chart.options.customOffset;
// exisit gracefully if offset not defined or less than 0
if(!offset || offset < 0) return;
var yAxes = chart.options.scales.yAxes;
for(var i=0; i<yAxes.length; i++){
var axis = yAxes[i];
var datasets = chart.data.datasets;
var max = Number.MIN_VALUE;
var min = Number.MAX_VALUE;
var datasetsOnAxis = [];
for(var j=0; j<datasets.length; j++){ // add datasets for this axes to datasetsOnAxis
var dataset = datasets[j];
var meta = chart.getDatasetMeta(j);
if (meta.yAxisID === axis.id) datasetsOnAxis.push(dataset);
}
for(var k=0; k<datasetsOnAxis.length; k++){
var dataset = datasetsOnAxis[k]
var newMax = Math.max.apply(null, dataset.data);
var newMin = Math.min.apply(null, dataset.data);
max = newMax > max ? newMax : max;
min = newMin > min ? min : newMin;
}
axis.ticks.max = max + offset;
axis.ticks.min = min - offset;
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment