Chart.JS multiple plugins do not operate

Question

I am working with chart.js and am trying to add 2 plugins to the same chart, but when applied, both of the plugins disappear and there is no direct error in the console.

Does anyone know how to implement two plugins to the same graph?

First pulgin

Second plugin referance

Basically, the graph has to show data labels on a line chart and at the same time, draw yAxis lines, but only starting from the points on the line chart.

For some reason, the chart will not show either of them when both are applied.

    Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
        color : '#ffffff'
    })
    // Chart.plugins.unregister(ChartDataLabels);
    // var chart = new Chart(ctx, {
    // / plugins: [ChartDataLabels],
    // options: {
    // // ...
    // }
    // })
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type : 'line',

        // The data for our dataset
        data : {
            labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
            datasets : [ {
                label : 'My first dataset',
                borderWidth : 3,
                borderColor : 'rgb(255,0, 0)',
                data : data1,
            } ]
        },

        // Configuration options go here
        options : {
            elements : {
                point : {
                    radius : 3
                }
            },
            legend : {
                display : false,
                labels : {
                    fontColor : "white",
                    fontSize : 18
                }
            },
            scales : {
                yAxes : [ {
                    ticks : {
                        fontSize : 0,
                        beginAtZero : false,
                        max : 40,
                    },
                    gridLines : {
                        display : false,
                        drawBorder : false,
                    }
                } ],
                xAxes : [ {
                    ticks : {
                        fontColor : "white",
                        fontSize : 14,
                        beginAtZero : 0,
                    },
                    gridLines : {
                        display : false,
                    }
                } ]
            },
             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;
                    }
                }
            }
        }

    });



var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ];
    myChart(data1);

HTML .js code

<script src="js/chart.js"></script>
    <!-- data label .js -->
<script
    src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <!-- yAxis lines .js -->
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Answer 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/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>