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
Post a Comment