chart.js - Show highest value untop of a bars when dataset is stacked (chartjs) -
i have code:
animation: { duration: 500, oncomplete: function() { var ctx = this.chart.ctx; var chart = this; ctx.textalign = "center"; ctx.textbaseline = "middle"; var datasets = this.config.data.datasets; ctx.font = "15px quicksand"; datasets.foreach(function (dataset, i) { switch ( chart.getdatasetmeta(i).type ) { case "bar": ctx.fillstyle = "#303030"; chart.getdatasetmeta(i).data.foreach(function (p, j) { ctx.filltext(datasets[i].data[j], p._model.x, p._model.y - 10); }); break; } }); } }
and these datasets:
datasets: [ { backgroundcolor: '#f87979', data: [6500, 5500]}, { backgroundcolor: '#f8f8ee', data: [4800, 5600] } ]
the dataset set stacked using.
scales: { xaxes: [{ barthickness: 25, stacked: true, ticks: { beginatzero: true, padding: 0, fontsize: 13 } }], yaxes: [{ stacked: true, display: false }] },
what above code placing values on bars. problem want show highest value each dataset @ above each bar. , not values each point.
can guys me this? have been trying 1 day now.
to clearify instead of this:
i want this: image wanted values
check out jsfiddle: https://jsfiddle.net/umsbywlg/2/
essentially calculated max value , drew on top on stacked bars:
oncomplete: function() { var ctx = this.chart.ctx; var chart = this; ctx.textalign = "center"; ctx.textbaseline = "middle"; var datasets = this.config.data.datasets; ctx.font = "15px quicksand"; ctx.fillstyle = "#303030"; datasets.foreach(function (dataset, i) { var maxvalue = 0; chart.getdatasetmeta(i).data.foreach(function (p, j) { if(maxvalue < datasets[j].data[i]) { maxvalue = datasets[j].data[i]; } }); ctx.filltext(maxvalue, datasets[i]._meta[0].data[i]._view.x, 20); }); }
Comments
Post a Comment