Highcharts Stock Demo

author(s): Torstein Hønsi

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>

JavaScript

$(function () {
    $('#container').highcharts('StockChart', {
        
        navigator: {
            height: 42,
            outlineColor: 'red',
            outlineWidth: 1,
            handles: {
                backgroundColor: '#5EB8D6',
			    borderColor: '#5EB8D6',
                outlineColor: 'green'
            },
            maskFill: 'rgba(0,150,76,0.15)',
            series: {
                type: 'area',
                fillColor: 'rgba(0,150,76,0.1)',
                lineColor: '#2BAD78'
			},
            xAxis: {
                gridLineWidth: 1,
                gridLineColor: '#E3E3E3',
                tickPixelInterval: 100
            },
            yAxis: {
                gridLineWidth: 1,
                gridLineColor: '#E3E3E3',
                tickPixelInterval: 20
            }            
        },

        rangeSelector: {
            selected: 1
        },
        
        scrollbar: {
			liveRedraw: false,
			enabled: false
		},

        series: [{
            name: 'USD to EUR',
            data: usdeur,
            type: 'area'
        }]
    });
});