Highcharts Demo

author(s): Torstein Hønsi

by tin nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.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 = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
    data = [{
        y: 56.33,
        color: colors[0],
        drilldown: {
            name: 'MSIE versions',
            categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0',
                'MSIE 10.0', 'MSIE 11.0'],
            data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
            color: colors[0]
        }
    }, {
        y: 10.38,
        color: colors[1],
        drilldown: {
            name: 'Firefox versions',
            categories: ['Firefox v31', 'Firefox v32', 'Firefox v33',
                'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
            data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
            color: colors[1]
        }
    }, {
        y: 24.03,
        color: colors[2],
        drilldown: {
            name: 'Chrome versions',
            categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0',
                'Chrome v33.0', 'Chrome v34.0',
                'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0',
                'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0',
                'Chrome v43.0'],
            data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96,
                5, 4.32, 3.68, 1.45],
            color: colors[2]
        }
    }, {
        y: 4.77,
        color: colors[3],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1',
                'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
            data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
            color: colors[3]
        }
    }, {
        y: 0.91,
        color: colors[4],
        drilldown: {
            name: 'Opera versions',
            categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
            data: [0.34, 0.17, 0.24, 0.16],
            color:...