score: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;
}
}
score:1
In version 3.5.1
afterTickToLabelConversion: function( scaleInstance ){
scaleInstance.ticks.pop();
scaleInstance.ticks.shift();
}
score:3
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,
},
...
score:25
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
Source: stackoverflow.com
Related Query
- Hide min and max values from y Axis in Chart.js
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- chart.js how to force min and max y axis values
- How to set max and min value for Y axis
- ChartJS: How to set fixed Y axis max and min
- Chartjs: how to show only max and min values on y-axis
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- ChartJS automatically scaled chart has undefined min and max
- Bar chart with min height and zero values - ChartJs
- Setting min and max values chart.js
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- Chartjs gradient background color based on min and max values
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- min and max tag is not showing in chart chart.js
- Set minimum and maximum axis values on chart
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- How to set only min and max values in y-axis (chart js)
- In Chart.js set chart title, name of x axis and y axis?
- Change color of X and Y axis values in Chart.js
- Chart.js timescale: set min and max on xAxes
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js bar chart : Grid color and hide label
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js Timeseries chart - formatting and missing data values
- Chart.js - Setting max Y axis value and keeping steps correct
- Obtain max value of y axis of line chart rendered with Chart.js
- In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
- Show all values in Chart js y axis
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
More Query from same tag
- Is it possible to combine two Y axes into a single tooltip with ChartJS 2?
- Chartjs isn't rendering bar chart, even though chart variable shows correctly when console logged
- functional component not re-rendering after setState update hook
- Align Title Left React Chart.js V2
- Canvas JS using ajax call
- ChartJS width undefined in React Typescript
- ng2-charts doughnut chart with different data per series
- Chart.js - Uncaught ReferenceError: chart is not defined
- How to make a step line with charts.JS
- opening json file to create chart in chart.js
- Failed to use Chart.js using Angular2
- Chart.js Bar graph will not start at zero as minimum value
- $(...).getContext("2d") is not a function when using chart.js
- How do you output the correct value for Chart.js Radar graph on label?
- ReferenceError: Chart is not defined with primeNg and angular 4
- is there anything wrong with this If Condition in Javascript code?
- Barchart reducing space between bars
- How to add null value rows into pandas dataframe for missing years in a multi-line chart plot
- How to filter react-chartjs-2
- Destroying Chart js within useEffect - React
- pie chart inside donut chart using chart js
- Angular: How to change color of chartjs?
- Chart.js two columns on page - left column is squished until page resize
- Using data from model in Chart.js MVC c#
- How to disable Chart JS tooltip when there is no value?
- Show image instead a point in a ChartJS scatter plot
- Datalabels not showing on Chart.js
- After form submit, function runs quickly and chart.js shows up for a second then goes away
- Uncaught ReferenceError: require is not defined using react-chartjs.min.js
- Unexpected text "NaN" appearing near y-axis of the Chart