score:9
That would be a nice feature, but I don't think there is a direct way to do that. You could use the afterBuildTicks call back in combination with the min, max, and autoSkip options.
The Fix
The afterBuildTicks callback is passed the scale object. The scale object has an array of all the ticks to be displayed (stored in scale.ticks) so you could set your ticks in that array. Chart.js tries to make your chart look nice, so it will not show all the ticks by default. To fix this set the min and max to the lowest and highest values in your custom scale range. Also set autoSkip = false to make sure that all the ticks are displayed.
Example
jsfiddle with your example scale
jsfiddle with a smaller scale range
var ticks = [11000, 10000, 7000, 3000, 1000, 500, 100];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
datasets: [{
data: [6000, 5000, 8000, 2000, 10000, 3500, 6000, 2000, 4000, 6000]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
autoSkip: false,
min: ticks[ticks.length - 1],
max: ticks[0]
},
afterBuildTicks: function(scale) {
scale.ticks = ticks;
return;
},
beforeUpdate: function(oScale) {
return;
}
}]
}
}
});
Source: stackoverflow.com
Related Query
- How to set max and min value for Y axis
- How to set static value in y-axis in chart.js?
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- How to set y axis to the max dataset value in Chartjs?
- How to show tooltip value of all data falling on the same axis in chart js?
- how to disable last/max value shown on x axis in chart js?
- How to set minimum value to Radar Chart in chart js
- How do you set x and y axis and Title for a line chart using charts.js?
- How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?
- How to set minimal value for bar chart in Chart.js? (ver. 2.0.2)
- How to set min Value a step down of min value received from database in Y Axis in ChartJS
- How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?
- Chartjs Bar Chart Y Axis set base starting value to not be 0
- How to set percentage value by default on each bars in horizontal bar chart js
- how to set start value as "0" in chartjs?
- In Chart.js set chart title, name of x axis and y axis?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How to set ChartJS Y axis title?
- How set color family to pie chart in chart.js
- ChartJS: How to set fixed Y axis max and min
- chartjs : how to set custom scale in bar chart
- ng2-charts: How to set fixed range for y axis
- Chart JS - set start of week for x axis time series
- How to display value of only one datapoint in line chart
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Obtain max value of y axis of line chart rendered with Chart.js
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to create single value Doughnut or Pie chart using Chart.js?
- How do I fix over limit y axis value in ChartJS
More Query from same tag
- Chart js: generate dynamic labels according to the data
- Chart.js changes selected legend filters when using update function
- custom tooltips with react-chartjs-2 library
- Chart.js How to align two X-axis in bar chart?
- Chart.js: load new data on click
- Align lines and bars in a mixed chart
- Parse 2d int array to List of BubbleDataPoints
- Replace chartjs data
- How to use two Y axes in Chart.js v2?
- Chart.js: Legend doesn't update on first call to chart.update()
- Real time colored bar chart
- Chart.js the value on the graph does not disappear when deselected
- chart.js, after each update, avoid scrolling to top position
- Saving chart.js chart to a folder (Not download)
- Chart.js - Black bar colors in mobile devices
- How can I get two stacked chart.js charts to be different types?
- ChartJS does not render correctly
- Chart.js custom plugin before destroy
- Using CSS variables (color) with chart.js - "var(--primaryColor)" not working
- Yii2 Chart is not defined
- How to add external scripts and css in latest angular-cli
- Chart.js: chart not displayed from modules despite no errors - JS
- Chartjs - Shift line plot to the right?
- Page with multiple chart.js charts to pdf
- How to set minimum value to Radar Chart in chart js
- Chartjs Barchart without borders
- Why am I getting "plot.new has not been called yet" calling legend() after chartJSRadar()
- Change the hover data value from to string
- how to display table from chart js data in canvas.js using java script .?
- Updating chart.js bar graph in real time