Highcharts Demo

author(s): Torstein Hønsi

by vibhuti

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 1000px;
    height: 420px;
    margin: 1em auto;
}

JavaScript

/**
 * This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock.
 * It also shows custom graphics drawn in the chart area on chart load.
 */


/**
 * Fires on chart load, called from the chart.events.load option.
 */
function onChartLoad() {

    var centerX = 140,
        centerY = 110,
        path = [],
        angle,
        radius,
        badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
        spike,
        empImage,
        big5,
        label,
        left,
        right,
        years,
        renderer;

    if (this.chartWidth < 530) {
        return;
    }



    // Prepare mouseover
    renderer = this.renderer;
    
}


var options = {

    chart: {
        events: {
            load: onChartLoad
        }
    },

    xAxis: {
        type: 'datetime',
        minTickInterval: 365 * 24 * 36e5,
        labels: {
            align: 'left'
        }
        

    },

    title: {
        text: 'Highcharts and Highsoft timeline'
    },

    tooltip: {
        style: {
            width: '250px'
        }
    },

    yAxis: [{
        max: 100,
        labels: {
            enabled: false
        },
        title: {
            text: ''
        },
        gridLineColor: 'rgba(0, 0, 0, 0.07)'
    }, {
        allowDecimals: false,
        max: 15,
        labels: {
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: 'Employees',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        opposite: true,
        gridLineWidth: 0
    }],

    plotOptions: {
        series: {
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2
            },
            fillOpacity: 0.5
        },
        flags: {
            tooltip: {
                xDateFormat: '%B %e, %Y'
            }
        }
 ...