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:

image values

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

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

.htaccess - ERR_TOO_MANY_REDIRECTS htaccess -