Chartjs hovering over one Chart, shows tooltip across all charts

Question

i am using chartjs with angular ( https://jtblin.github.io/angular-chart.js/ ) i am able to get vertical line in my chart when hovering using How to render a vertical line on hover in chartjs example.

I tired looking for any examples for curved line chart where X-axis has shared date range between all chart in DOM but Y-axis has different values. hovering over any chart will trigger hover over all available charts and display that vertical line like above with tool-tip on all charts

Answer 1

    tooltips: {
      mode: 'x-axis'
    },

If I understand what you want correctly, this should do it.

Answer 2

This jsfiddle may be able to help you:

https://jsfiddle.net/vikas12118/k4oveLsb/

 var charts = [];

$(document).ready(function () {

    Chart.defaults.LineWithLine = Chart.defaults.line;
    Chart.controllers.LineWithLine = Chart.controllers.line.extend({
        draw: function(ease) {
            if (charts) {
                for (var i = 0; i < charts.length; i++) {
                    charts[i].tooltip._active = [];
                    charts[i].tooltip.update(true);
                    charts[i].draw();
                }
            }
            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 = 2;
                ctx.strokeStyle = '#07C';
                ctx.stroke();
                ctx.restore();
                if(charts)
                {
                    showTooltip(chart1.chart.tooltip._active[0]._index);

                }
            }
        }
    });



    var ctx1 = document.getElementById('myChart1').getContext('2d');
    var chart1 = new Chart(ctx1, {
        type: 'LineWithLine',
        data: {
            labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
            datasets: [{
                lineTension: 0,
                backgroundColor: "rgb(34,139,34)",
                borderColor: "rgb(34,139,34)",
                data: [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22],
                fill: false,
                pointRadius: 1.5,
                pointHoverRadius: 1,
                borderWidth :1.5
            }],
        },
        options: {
            maintainAspectRatio: false,
            responsive: false,
            /*legend: {
                display: false
            }, s: {
                displayColors: false
            },*/
            hover: {
                mode: 'index',
                intersect: false,
            },
            title: {
                display: true,
                text: ''
            },
            legend: {
                display: false
            },
            tooltips: {
                mode: 'index',
                //enabled: false,
                intersect: false,
            },
        }
    });


     var ctx2 = document.getElementById('myChart2').getContext('2d');
    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 = 2;
                ctx.strokeStyle = '#07C';
                ctx.stroke();
                ctx.restore();
            }
        }
    });

    var chart = new Chart(ctx2, {
        type: 'LineWithLine',
        data: {
            labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
            datasets: [{
                lineTension: 0,
                backgroundColor: "rgb(34,139,34)",
                borderColor: "rgb(34,139,34)",
                data: [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8],
                fill: false,
                pointRadius: 1.5,
                pointHoverRadius: 1,
                borderWidth :1.5
            }],
        },
        options: {
            maintainAspectRatio: false,
            responsive: false,
            title: {
                display: true,
                text: ''
            },
            legend: {
                display: false
            },
            tooltips: {
                mode: 'index',
                //enabled: false,
                intersect: false,
            },
        }

    });

    charts.push(chart)

});


function showTooltip(index) {
    if (Array.isArray(charts) && charts.length) {
        for (var i = 0; i < charts.length; i++) {
            var segment = charts[i].getDatasetMeta(0).data[index];
            charts[i].tooltip._active = [segment];
            charts[i].tooltip.update(true);
            charts[i].draw();
        }
    }
}

html content

<div>
<canvas style="width: 800px" height="300px" id="myChart1"></canvas></div>
<div>
  <canvas style="width: 800px" height="300px" id="myChart2"></canvas></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>