score:5
Figured it out. Instead of supplying the max value on the Y Axis as I have been, I instead implemented the afterBuildTicks callback and updated the ticks to have the correct increments.
yAxes: [{
afterBuildTicks: function(scale) {
scale.ticks = updateChartTicks(scale);
return;
},
beforeUpdate: function(oScale) {
return;
},
ticks: {
beginAtZero:true,
// max:plugin.settings.maxDataValue,
maxTicksLimit: 10
}
}]
my updateChartTicks function loops over the existing ticks and determines the correct increment amount between the ticks. Then I use that value to add my final "tick" which will always be greater than the largest data in the dataset.
var updateChartTicks = function(scale) {
var incrementAmount = 0;
var previousAmount = 0;
var newTicks = [];
newTicks = scale.ticks;
for (x=0;x<newTicks.length;x++) {
incrementAmount = (previousAmount - newTicks[x]);
previousAmount = newTicks[x];
}
if (newTicks.length > 2) {
if (newTicks[0] - newTicks[1] != incrementAmount) {
newTicks[0] = newTicks[1] + incrementAmount;
}
}
return newTicks;
};
score:16
I too had the same problem. You needn't write any special function for determining the max value in the Yaxes. Use 'suggestedMax' setting. Instead for setting 'max' as maximum value in your graph, set suggestMax as the maximum value in your graph. This never works if you have set 'stepsize'.
options: {
scales: {
yAxes: [{
ticks: {
suggestedMax: maxvalue+20
}
}]
}
}
20 is added, so that the tooltip on max value will be clearly visible.
For more info, refer http://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings
Source: stackoverflow.com
Related Query
- Chart.js - Setting max Y axis value and keeping steps correct
- How to set max and min value for Y axis
- Obtain max value of y axis of line chart rendered with Chart.js
- 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
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- Chart.js with line chart and bar chart - bar chart not rendered although the max value of it is shown
- In Chart.js set chart title, name of x axis and y axis?
- Set min, max and number of steps in radar chart.js
- ChartJS: How to set fixed Y axis max and min
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Hide min and max values from y Axis in Chart.js
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- Map event position to y axis value in chartjs line chart
- to increase space between x axis and first horizontal bar in chart js
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Chartjs - Set start and end value into a Bar Chart
- Setting up min and max in chartjs did not work
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How to sort XY line chart tooltip items based on value and add thousands separators?
- ChartJS automatically scaled chart has undefined min and max
- Click on interactive chart.js bar chart and get value for labels and groups in JS
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- How to set y axis to the max dataset value in Chartjs?
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- Setting min and max values chart.js
- 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?
More Query from same tag
- Chart.js - Tooltips overlapped by bar values
- Chartjs yAxes not rendering ticks
- How to set lower and upper bound in react react-chartjs-2?
- Reference Javascript variable in JSON
- Labels for Nested Doughtnut Chart React ChartJS
- Chart.js dynamic bar width
- Barchart reducing space between bars
- Chartjs! Date order value high to low
- Chart.js: Fill background between two lines
- how to use require(chart.js) in codesandbox
- Find intersection between the chart lines in chartjs
- Y scaling relative to the max value in my ChartJS chart
- Animate datasets separately
- Display data at ends of floating bar graph (created using chart js)
- Chartjs doughnut chart rounded corners for half doghnut
- Chart.js after ajax refresh there are two charts in the same container (new and old)
- Can I interpret Django object values as JSON data within the JS script in my HTML?
- ChartJS does not display the legend
- Chart.js usage error (v2.4)
- how can i remove the grid lines in chartJs
- Chart.js & BPopUp - Make a Chart in a PopUP
- How to install vue-chartkick and use it in my components?
- How to hide labels by two ticks? chartjs
- Thousand separator in pie chart of charts.js
- How to change colour of specific xAxis label in charts js
- Chart.js bar color based on labels values
- How to get the length (height) of the vertical bar in Chart.js
- How set color family to pie chart in chart.js
- Chart Js Negative Scale
- Chart.Js pie chart click