Highcharts Demo

author(s): Torstein Hønsi

by Bharathi Prasannaa

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

CSS

#container {
	max-width: 660px;
	margin: auto;
	height: 400px;
	margin: 0 auto;
}

JavaScript

var colors = Highcharts.getOptions().colors,
    categories = [
        "Chrome",
        "Firefox",
        "Internet Explorer",
        "Safari",
        "Edge",
        "Opera",
        "Other"
    ],
    data = [
        {
            "y": 62.74,
            "color": colors[2],
            "drilldown": {
                "name": "Chrome",
                "categories": [
                    "Chrome v65.0",
                    "Chrome v64.0"
                ],
                "data": [
                    0.1,
                    1.3
                  
                ]
            }
        },



        {
            "y": 7.62,
            "color": colors[6],
            "drilldown": {
                "name": 'Other',
                "categories": [
                    'Other'
                ],
                "data": [
                    7.62
                ]
            }
        }
    ],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;


// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

    // add browser data
    browserData.push({
        name: categories[i],
        y: data[i].y,
        color: data[i].color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
        brightness = 0.2 - (j / drillDataLen) / 5;
        versionsData.push({
            name: data[i].drilldown.categories[j],
            y: data[i].drilldown.data[j],
            color: Highcharts.Color(data[i].color).brighten(brightness).get()
        });
    }
}

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Browser market share, January, 2018'
    },
    subtitle: {
        text: 'Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }
    },
   ...