Highcharts Demo

author(s): Torstein Hønsi

by nehamahajan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>
<div id="container1" style="height: 400px; width: 500px"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        marginBottom: 80
    },
    
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
        labels: {
            align: 'left',
            x: -10,
            y: -2
        }
    },

		plotOptions: {
            series: {
                point: {
                    events: {
                        /*mouseOver: function(){
                            syncTooltip(this.series.chart.container, this.x);
                        }*/
                    }
                }
            }
        },
        tooltip: {
        //shared: true
        },
    series: [{
        data: [21129.9, 11171.5, 1106.4, 21129.2, 11144.0, 1176.0, 21135.6, 11148.5, 1216.4, 21194.1, 11195.6, 1154.4]
    },{
        data: [11129.9, 1171.5, 106.4, 11129.2, 1144.0, 176.0, 11135.6, 1148.5, 216.4, 11194.1, 1195.6, 154.4]
    }]
});

Highcharts.chart('container1', {
    chart: {
        marginBottom: 80
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
        labels: {
            align: 'left',
            x: -10,
            y: -2
        }
    },

plotOptions: {
            series: {
                point: {
                    events: {
                        /*mouseOver: function(){
                            syncTooltip(this.series.chart.container, this.x);
                        }*/
                    }
                }
            }
        },
        tooltip: {
        //shared: true
        },
    series: [{
        data: [21129.9, 11171.5, 1106.4, 21129.2, 11144.0, 1176.0, 21135.6, 11148.5, 1216.4, 21194.1, 11195.6, 1154.4]
    },{
        data: [11129.9, 1171.5, 106.4, 11129.2, 1144.0, 176.0, 11135.6, 1148.5, 216.4, 11194.1, 1195.6, 154.4]
    }]
});

function syncTooltip(container, p) {
    _.each(['container', 'container1'],...