[Chartjs]-Hide min and max values from y Axis in Chart.js

27๐Ÿ‘

In order to hide specific ticks (in your case the first and last tick), you have to use the scale afterTickToLabelConversion callback property and set the value = null of the tick indexes within scaleInstance.ticks that you are wanting to hide. This will prevent them from being drawn on the canvas.

Here is an example that hides the first and last tick (by setting their values = null).

afterTickToLabelConversion: function(scaleInstance) {
  // set the first and last tick to null so it does not display
  // note, ticks[0] is the last tick and ticks[length - 1] is the first
  scaleInstance.ticks[0] = null;
  scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;

  // need to do the same thing for this similiar array which is used internally
  scaleInstance.ticksAsNumbers[0] = null;
  scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
}

You can see it in action on this codepen example

4๐Ÿ‘

Hiding the max worked this way for me (ng2-charts):
I return undefined instead of value to hide tickโ€™s value & line

scales: {
      yAxes: [{
        ticks: {
          callback: (value, index, values) => (index == (values.length-1)) ? undefined : value,
        },

โ€ฆ

2๐Ÿ‘

In version 3.5.1

afterTickToLabelConversion: function( scaleInstance ){
    scaleInstance.ticks.pop();
    scaleInstance.ticks.shift();
}

0๐Ÿ‘

When using the plugin chartjs-plugin-zoom I only wanted to remove those ticks if they had decimals, as it created a flickering effect when panning.

Implementation:

afterTickToLabelConversion: (scaleInstance) => {
    if (scaleInstance.ticks[0].indexOf(".") > -1) {
        scaleInstance.ticks[0] = null;
        scaleInstance.ticksAsNumbers[0] = null;
    }
    if (scaleInstance.ticks[scaleInstance.ticks.length - 1].indexOf(".") > -1) {
        scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
        scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
    }
}

Leave a comment