Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Obtain max value of y axis of line chart rendered with Chart.js

Tags:

chart.js

I use Chart.js to render a scattered line chart, which works pretty well. For the rendering algorithm I need to find out the highest value shown on the y-axis, so let's say my "largest" point in the dataset has y = 248, so the y-axis shows 250 as the largest value. I need to find out that it's 250.

I tried to inspect the chart object at runtime, like so:

lineChart.options.scales[0].ticks.??

but it seems that I can only find out the settings I set myself programmatically.

Also looking at the comprehensive Chart.js docs did not point me to the solution.

Any advice how to figure out this value?

like image 567
Emdee Avatar asked Dec 18 '16 17:12

Emdee


1 Answers

There is callback method in which you can get the array of values which will show on yAxes.
The first element of that array will be the highest value for the yAxes. Below is the sample code for the same.

var yAxesticks = [];
var highestVal;
var chartInstanceHoverModeNearest = new Chart(ctx, {
                type: 'bar',
                data: data,
                options:{
                    scales: {
                        yAxes : [{
                            ticks : {
                                beginAtZero : true,
                                callback : function(value,index,values){
                                    yAxesticks = values;
                                    return value;
                                }
                            }
                        }]
                    }
                }
            });

 highestVal = yAxesticks[0];
like image 53
Sanjay Dutt Avatar answered Jan 04 '23 15:01

Sanjay Dutt