Highcharts Demo

author(s): Torstein Hønsi

by Fusher

HTML

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

<div id="scrollDiv" style="float:left;position:relative;height: 400px;width:400px;overflow:scroll">
<div id="axis" style="right:100px;float:right;position:fixed;height: 350px;width:120px;z-index:10"></div>
<div id="container" style="float:left;position:relative;height: 350px;width:400px"></div></div>

JavaScript

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            width: 3000,
            height: 350
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        tooltip: {
            useHTML: true,
            id: 'x'
        },
        series: [{
            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]}]
    }, function(chart) {
        $("#container .highcharts-container div").css({'z-index':12});
        var ex = chart.yAxis[0].getExtremes();
        var chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'axis',
                width: 100,
                height: 316,
                margin: [40,50,32,10]
            },
            title: {
                text: null
            },
            credits: false,
            yAxis: {
                min: ex.min,
                max: ex.max,
                opposite: true
            },
            xAxis: {
                tickLength: 0,
                labels: {
                    enabled: false
                }
            },
            series: [{
                showInLegend: false,
                data: [null]}]
        });
    });
});