Highcharts Demo

author(s): Torstein Hønsi

by Fred Farmer

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

// Create the chart
Highcharts.chart("container", {
    chart: {
        type: "column"
    },
    title: {
        text: "Basic drilldown"
    },
    xAxis: {
    type : "category",
   
    },
yAxis : {
	title : {
  text :  "Total Visits"
  }
},
    legend: {
        enabled: true
    },
     navigation: {
                    buttonOptions: {
                        align: "right",
                        verticalAlign: "bottom",
                        y: -15
                    }
                },
plotOptions: {
                    series: {
                        borderWidth: 0,
                        cropThreshold: 500,
                        dataLabels: {
                            enabled: false,
                            format: "{point.y:.1f}"
                        }
                    }
                },
   
    series: [{
        
        colorByPoint : false,
        compare : undefined,
        data: [{
            name: "2017-09-28",
            y: 8,
            drilldown : "2017-09-28-2017-Sassandra-1-Farm"
        }, {
            name: "2017-09-29",
            y: 5,
            drilldown : "2017-09-29-2017-Sassandra-1-Farm"
        }, {
            name: "2017-10-01",
            y: 10,
            drilldown : "2017-10-01-2017-Sassandra-1-Farm"
        }, {
            name: "2017-10-02",
            y: 6,
            drilldown : "2017-10-02-2017-Sassandra-1-Farm"
        }],
        name: "2017-Sassandra-1-Farm"
    },
    {
        name: "2017-LTG-1-Farm",
        colorByPoint : false,
        compare : undefined,
        data: [{
            name: "2017-09-28",
            y: 3,
            drilldown : "2017-09-28-2017-LTG-1-Farm"
        }, {
            name: "2017-09-29",
            y: 11,
            drilldown : "2017-09-29-2017-LTG-1-Farm"
        }]
    },
    {
        name: "2017-LTG-1-Co-Operative",
        colorByPoint : false,
        compare : undefined,
        data: [{
            name: "2017-09-29",
            y:...