score:5

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>

score:9

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

if i understand what you want correctly, this should do it.


Related Query

More Query from same tag