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,
},
โฆ
- [Chartjs]-Click events on Pie Charts in Chart.js
- [Chartjs]-How to set start value as "0" in chartjs?
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;
}
}