How to add a vertical line on Chart.js when hover a point?

Question

I've created a chart by using Chart.js. It displays some currency values on horizontal and vertical axes. I added many points and I show them as circle. I want to add a vertical line on the point when hover on the point like this:

And here is my chart code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<div class="container" style="width: 100%;margin-top:30px;">
    <canvas id="myChart"></canvas>
</div>
<script>
    let zzz = document.getElementById('myChart').getContext('2d');

    // Global Options
    Chart.defaults.global.defaultFontFamily = 'Arial';
    Chart.defaults.global.defaultFontSize = 16;
    Chart.defaults.global.defaultFontColor = '#000';


    let massPopChart = new Chart(zzz, {
      type:'line', 
      data:{
        labels:[
        '20/09/2017',
        '20/10/2017',
        '20/11/2017',
        '20/12/2017'
        ],
        datasets:[{
          label:'US Dollar',
          fill: false,
          lineTension: 0,
          data:[
            123,
            143,
            156,
            122
          ],
          pointBackgroundColor: '#f90',
          pointHoverBackgroundColor: '#fff',
          //backgroundColor:'green',
          backgroundColor:[
            '#2277bb',
            '#2277bb',
            '#2277bb',
            '#000000',
          ],
          borderWidth:3,
          borderColor:'#f90',
          hoverBorderWidth:3,
          hoverBorderColor:'#fff'
        }]
      },
      options:{
        title:{
          display:true,
          text:'Chart 1',
          fontSize:16
        },
        legend:{
          display:true,
          position:'top',
          labels:{
            fontColor:'#000'
          }
        },
        layout:{
          padding:{
            left:50,
            right:0,
            bottom:0,
            top:0
          }
        },
        tooltips:{
          enabled:true,
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        elements: {
            point: {
                radius: 5
            }
        },
        
        
        
      }
    });
  </script>

And how can I add a line to my chart like in the example above?

Answer 1

I found another question that describes the solution you want. I hope this helps.

Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.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,
                topY = this.chart.scales['y-axis-0'].top,
                bottomY = this.chart.scales['y-axis-0'].bottom;

            // draw line
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(x, topY);
            ctx.lineTo(x, bottomY);
            ctx.lineWidth = 4;
            ctx.strokeStyle = '#757575';
            ctx.stroke();
            ctx.restore();
        }
    }
});

Chart.defaults.global.defaultFontFamily = 'Arial';
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#000';

var chart = new Chart("myChart", {
    type: 'LineWithLine',
    data: {
        labels: ['20/09/2017',
            '20/10/2017',
            '20/11/2017',
            '20/12/2017'
        ],
        datasets: [{
            label: 'US Dollar',
            fill: false,
            lineTension: 0,
            data: [123, 143, 156, 122],
            pointBackgroundColor: '#f90',
            pointHoverBackgroundColor: '#fff',
            //backgroundColor:'green',
            backgroundColor: ['#2277bb', '#2277bb', '#2277bb', '#000000', ],
            borderWidth: 3,
            borderColor: '#f90',
            hoverBorderWidth: 3,
            hoverBorderColor: '#fff'
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Chart 1',
            fontSize: 16
        },
        legend: {
            display: true,
            position: 'top',
            labels: {
                fontColor: '#000'
            }
        },
        layout: {
            padding: {
                left: 50,
                right: 0,
                bottom: 0,
                top: 0
            }
        },
        tooltips: {
            enabled: true,
            intersect: false
        },
        elements: {
            point: {
                radius: 5
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width: 100%;margin-top:30px;">
    <canvas id="myChart"></canvas>
</div>