[Chartjs]-Chart.JS multiple plugins do not operate

by

1👍

✅

var chart = new Chart(document.getElementById('chart'), {        
    type : 'line',		        
    data : {
        labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
        datasets : [ {
            label : 'My first dataset',
            borderWidth : 1,
            borderColor : 'rgb(255,0, 0)',
            data : [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ],
             datalabels: {
          align: 'end',
          anchor: 'end',								
                  backgroundColor: 'rgb(255, 120, 12, .2)',
borderRadius: 20
             }
        }]
    },        
    options : {
        scales : {
			xAxes : [ {
				gridLines : {
                    display : false,						
					color: 'rgba(255, 120, 12, .2)',						
					lineWidth: 5
                }
			} ],
			yAxes : [{
			    gridLines : {
                    display : false,                        
					color: 'rgba(255, 120, 12, .2)',
					lineWidth: 5
                },
                ticks : {
                    beginAtZero: true
                }
            }]				
        },
	},
    plugins : [{ // this is the magical bit :)
		afterRender : function(c, options) {
			let meta = c.getDatasetMeta(0), max;
			c.ctx.save();
            c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
            c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
            c.ctx.beginPath();
			meta.data.forEach(function(e) 
			{
				if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
					max = c.config.data.datasets[0].data[e._index];
				}
				c.ctx.moveTo(e._model.x,meta.dataset._scale.bottom);
				c.ctx.lineTo(e._model.x,e._model.y);
            });
            c.ctx.textBaseline = 'top';
            c.ctx.textAlign = 'right';
            c.ctx.fillStyle = 'black';
            c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
            c.ctx.stroke();
			c.ctx.restore();
		}
	}],
	tooltips : {
            callbacks : {
                label : function(tooltipItem) {
                    console.log(tooltipItem)
                    return tooltipItem.yLabel;
                }
            }
        }        
});
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.6.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment