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.
 */



var options = {

    chart: {
        
    },

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

    title: {
        text: null
    },

    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
    }],

   

    series: [
    {
        yAxis: 1,
        name: 'Highsoft employees',
        id: 'employees',
        type: 'area',
        step: 'left',
        fillOpacity: 0,
        tooltip: {
            headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
           
            valueSuffix: ' employees'
        },
        data: [
            { x: Date.UTC(2009, 10, 1), y: 1},
            { x: Date.UTC(2010, 10, 20), y: 2},
            { x: Date.UTC(2011, 3, 1), y: 3},
            { x: Date.UTC(2011, 7, 1), y: 4},
            { x: Date.UTC(2011, 7, 15), y: 5},
            { x: Date.UTC(2012, 5, 1), y: 6},
            { x: Date.UTC(2012, 8, 1), y: 5},
            { x: Date.UTC(2012, 8, 15), y: 6},
            { x: Date.UTC(2013, 0, 1), y: 7},
            { x: Date.UTC(2013, 7, 1), y: 8},
            { x:...