Highcharts Demo

author(s): Torstein Hønsi

by sbochan

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

CSS

.val {
    width:40px;
float:left;
}

.item {
    float:left;
}

JavaScript

$(function () {
    $('#container').highcharts({
        
        chart: {
        },
        
        legend: {
            useHTML:true,
            labelFormatter: function() {
                return '<div class="item">'+this.name +' - </div><div class="val" id="'+this.options.id+'"></div>';
            }
        },
        plotOptions: {
            series: {
                point:{
                    events: {
                        mouseOver: function() {
                            var x = this.x,
                                series = this.series.chart.series;
                            
                            $('div#serie1').html(series[0].data[x].y);
                            $('div#serie2').html(series[1].data[x].y);
                        },
                        mouseOut: function() {
                            $('.highcharts-legend-item span div.val').html('');
                        }
                    }
                }
            }
        },
        series: [{
            id: 'serie1',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }, {
            id: 'serie2',
            data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]     
        }]
    });
});