Highcharts Stock Demo

author(s): Torstein Hønsi

by hfrntt

HTML

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

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

JavaScript

$(function() {
    window.chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            backgroundColor: '#CCCCCC',
            type: 'column'
                },
    title: {
                text: ''
             },
       legend: {
            enabled: false
        }, 
        xAxis: {
            categories: ['Total Gap', 'Execution Gap', 'Risk Gap', 'Strategy Gap'],
    labels: {
    style: {
        color: '#777777',
            fontWeight: 'bold' 
        }
    }},
    yAxis: {
            min: 85,
        max: 128,
        endOnTick: false,
        tickInterval: 5,
            startOnTick: false,
        gridLineColor: '#CCCCCC',
        tickColor: '#993300',
         lineColor: '#993300',
        lineWidth: 2,
        title: {
            text: null},
        labels: {
    style: {
        color: '#777777',
            fontWeight: 'bold' 
        },
                formatter: function() {
                    if (this.value == '100' || this.value == '85') {
                        return this.value;
                    } else {
                        return null;
                    }}}
    },
    tooltip: {
            formatter: function() {
                return this.x +
                    '</b> is <b>'+ this.point.name + '</b>';
            }
        },
    exporting: {
            filename: 'total_gap'
        },
        series: [ {
            color:'#73868c',
            shadow:false,
            borderWidth:1,
            borderColor:'#669',
            groupPadding:0,
            pointPadding:.1,
            data: [{
            name: '-15',
                low:85,
                y: 100        }, {
                name: '13',
                low: 100,
                y: 113  
            }, {
                name: '15',
                low: 113,
                y: 128  
            }, {
                name: '-13',
                low: 115,
                y: 128        }]
        }]                           
...