javascript - Chartjs: how to show only max and min values on y-axis -


i'd override nice number algorithm in chart js , display 2 labels (or ticks) on y-axis: max , min of values. values floating point numbers. see callback function ( yaxis.ticks.callback) has the ticks figured out don't think place it. appreciated.

you can use following callback function y-axis ticks achieve :

callback: function(value, index, values) {    if (index === values.length - 1) return math.min.apply(this, dataarr);    else if (index === 0) return math.max.apply(this, dataarr);    else return ''; } 

note: must use separate array data values (here it's dataarr), instead of in-line one.

edit :

add following in y-axis ticks config make data-points aligned ticks :

min: math.min.apply(this, dataarr), max: math.max.apply(this, dataarr) 

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var dataarr = [154.23, 203.21, 429.01, 637.41];  var chart = new chart(ctx, {     type: 'line',     data: {        labels: ['jan', 'feb', 'mar', 'apr'],        datasets: [{           label: 'line',           data: dataarr,           backgroundcolor: 'rgba(0, 119, 290, 0.2)',           bordercolor: 'rgba(0, 119, 290, 0.6)',           fill: false,           tension: 0        }]     },     options: {        scales: {           yaxes: [{              ticks: {                 min: math.min.apply(this, dataarr),                 max: math.max.apply(this, dataarr),                 callback: function(value, index, values) {                    if (index === values.length - 1) return math.min.apply(this, dataarr);                    else if (index === 0) return math.max.apply(this, dataarr);                    else return '';                 }              }           }]        }     }  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>  <canvas id="ctx"></canvas>


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -