简体   繁体   中英

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

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

},

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

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

...

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM