Highcharts Demo

author(s): Torstein Hønsi

by Vatsal Pande

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

/**
 * Add custom date formats
 */
Highcharts.dateFormats = {
    W: function (timestamp) {
        var date = new Date(timestamp),
            day = date.getUTCDay() === 0 ? 7 : date.getUTCDay(),
            dayNumber;
        date.setDate(date.getUTCDate() + 4 - day);
        dayNumber = Math.floor((date.getTime() - new Date(date.getUTCFullYear(), 0, 1, -6)) / 86400000);
        return 1 + Math.floor(dayNumber / 7);

    }
};

Highcharts.chart('container', {

    "chart": {
        "zoomType": "xy",
        "reflow": true,
        "borderColor": "silver",
        "borderWidth": 0,
        "borderRadius": 5,
        "height": 300
    },
    "title": {
        "useHTML": true,
        "text": "Visit Count",
        "style": {
            "color": "black",
            "fontWeight": "bold",
            "fontSize": "100%",
            "fontFamily": "HelveticaNeue-Light,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande,sans-serif;"
        }
    },
    "subtitle": {
        "text": null
    },
    "credits": {
        "enabled": false
    },
    "legend": {
        "enabled": true
    },
    
    "xAxis": {
        "type": "category"
    },
    "yAxis": [
        {
            "title": {
                "enabled": true,
                "text": "Visit Count",
                "style": {
                    "fontFamily": "HelveticaNeue-Light,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande,sans-serif;"
                }
            }
        },
        {
            "title": {
                "enabled": true,
                "text": "YoY%",
                "style": {
                    "fontFamily": "HelveticaNeue-Light,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande,sans-serif;"
                }
            },
            "opposite": true
        }
    ],
    "plotOptions": {
        "spline": {
            "marker": {
                "enabled": false
   ...