How to add "shadow" on hovering bar chart?

Question

Is it possible to add some shadow while hovering an index in chartJS?

Somethink like in this answer which add a line when points are hovered but i would to use it with a bar chart and make it look something like this:

Here is my actual chart jsfiddle

 <div class="chart-area chart-reparti">
      <canvas id="chartReparti" width="1600" height="250"></canvas>
 </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>


var optionsReparti = {
        maintainAspectRatio: false,
        legend: {
            display: true
        },
        tooltips: {
            backgroundColor: '#f5f5f5',
            titleFontColor: '#333',
            bodyFontColor: '#666',
            displayColors: true,
            mode: 'index',
            intersect: 0
        },
        responsive: true,
        scales: {
            yAxes: [{
                id: 'importo',
                gridLines: {
                    drawBorder: false,
                    borderDash: [4, 8],
                    color: 'rgba(0,132,255,0.4)',
                },
                ticks: {
                    beginAtZero: true,
                    userCallback: function (value, index, values) {
                        return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                    }
                }
            }, {
                id: 'qta',
                gridLines: {
                    drawBorder: false,
                    borderDash: [4, 8],
                    color: 'rgba(247,136,0,0.4)',
                },
                ticks: {
                    beginAtZero: true
                }
            },
            ],
            xAxes: [{
                categoryPercentage: 1,
                barPercentage: 0.4,
                gridLines: {
                    drawBorder: false,
                    color: 'rgba(225,78,202,0.1)',
                    zeroLineColor: "transparent",
                }
            }]
        }
    };


    var ctx = document.getElementById("chartReparti").getContext('2d');

    var gradientImporto = ctx.createLinearGradient(0, 170, 0, 50);
    gradientImporto.addColorStop(0, "rgba(0, 98, 255, 1)");
    gradientImporto.addColorStop(1, "rgba(84, 150, 255, 1)");

    var gradientQuantita = ctx.createLinearGradient(0, 170, 0, 50);
    gradientQuantita.addColorStop(0, "rgba(247, 136, 0, 1)");
    gradientQuantita.addColorStop(1, "rgba(255, 209, 72, 1)");

    var chartReparti = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Cane', 'Gatto', 'Accessori', 'Mangime', 'Carne', 'Cane', 'Gatto', 'Accessori', 'Mangime', 'Carne'],
            datasets: [{
                label: "Quantità",
                yAxisID: 'qta',
                fill: true,
                backgroundColor: gradientQuantita,
                pointBackgroundColor: '#f78800',
                data: [15, 15, 29, 10, 35, 12, 29, 10, 35, 12]
            }, {
                    label: "Importo",
                    yAxesID: 'importo',
                    fill: true,
                    backgroundColor: gradientImporto,
                    pointBackgroundColor: '#0084ff',
                    data: [2954, 4564, 2954, 4564, 3456, 4212, 5060, 3456, 4212, 5060]
                }
            ]
        },
        options: optionsReparti
    });

Actually the code of the modified plugin got from this answer is not included as it wasn't working at all.

Answer 1

U can customize code before draw it

Working demo : https://jsfiddle.net/4rasm1hc/

let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line = Chart.controllers.bar.extend({
    draw: function() {
        draw.apply(this, arguments);
        let ctx = this.chart.chart.ctx;
        let _stroke = ctx.stroke;
        ctx.stroke = function() {
            ctx.save();
            ctx.shadowColor = '#000000';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 4;
            _stroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

Chart.defaults.LineWithLine = Chart.defaults.bar;
Chart.controllers.LineWithLine = Chart.controllers.bar.extend({
   draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);

      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
         var activePoint = this.chart.tooltip._active[0],
             ctx = this.chart.ctx,
             x = activePoint.tooltipPosition().x+15,
             topY =6000,
             width=activePoint._view.width,
             bottomY = 0;
        console.log(activePoint);
         // draw line
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x+width-10, bottomY+30);
         ctx.lineWidth = width*4;
         ctx.strokeStyle = '#e5e0e01a';
         ctx.stroke();
         ctx.restore();
      }
   }
});