Hide min and max values from y Axis in Chart.js

Question

I have assigned the min and max of Y axes with the tick configuration.But I do not want these min max values to be shown in the graph.I need to hide these values at both the ends

ticks:
{
    callback: function(value){
    returnparseFloat(value.toFixed(2))
},
min: y1_min,
max: y1_max,
fontColor: "#000000",
fontSize: 12

},

Cabinda

Can you just set your min: y1_min + 1 and max: y_max - 1 to ensure they don't show? – Sieve

Do you want to hide just these two ticks (max and min) or would you like to hide all the ticks on the y axis? – Merrymaker

@iecs I just wanted to hide these two ticks. – Cabinda

@Sieve How will that solve? I wanted something like chart.yAxis.showMaxMin(false); as in d3 charts – Cabinda

The question wasnt really clear to me, it sounded like you set min and max to 0 and 10 for example, but only wished to see 1 - 9 instead. Thats the meaning of my suggestion. Nevertheless, I've done what you are wanting with radar charts so I think I have a solution.. – Sieve

Yes.My question was the same.But if we do the way you mentioned the graph will be plotted with max value as ( y1_max - 1) the whole graph will move upwards.Instead, I want it to be plotted with y1_max but hide the y1_max. – Cabinda

The reason for that is graph contains values from a to b. but we need to add a buffer space above the upper limit which is y1_max > b – Cabinda

Answer 1

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

Sieve

I cant get this working. Looks like scale.ticksAsNumbers has been removed from scales in 3.x of chartjs. – Vazquez

Looks like you need to overwrite the axis.ticks[i].label (with "") and keep the axis.ticks[i].value – Testy

Answer 2

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,
        },

...

Overexcite

This printed undefined on axis for me instead of hiding max. Changing undefined to empty string ' ' worked. – Vazquez

Worked as posted for me (chart.js 3.5) – Xi

You saved my day! Still works for chart.js 4.4.2 – Funky

Answer 3

In version 3.5.1

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

Greenlaw

Answer 4

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;
    }
}

Submicroscopic