YouTip

[Highcharts Column Chart](#) The following example demonstrates a stacked grouped column chart. We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations. Add the `series` property in `drilldown`: * * * ## Configuration ### drilldown: Drill Down `drilldown` is used to drill down into data, delving into specific details within it. drilldown: { series: drilldownSeries } ### Example Filename: highcharts_column_drilldown.htm $(document).ready(function() { Highcharts.data({ csv: document.getElementById('tsv').innerHTML, itemDelimiter: 't', parsed: function (columns) { var brands = {}, brandsData = [], versions = {}, drilldownSeries = []; // Parse percentage strings columns = $.map(columns, function (value) { if (value.indexOf('%') === value.length - 1) { value = parseFloat(value); } return value; }); $.each(columns, function (i, name) { var brand, version; if (i > 0) { // Remove special edition notes name = name.split(' -'); // Split into brand and version version = name.match(/(+[.0-9x]*)/); if (version) { version = version; } brand = name.replace(version, ''); // Create the main data if (!brands) { brands = columns; } else { brands += columns; } // Create the version data if (version !== null) { if (!versions) { versions = []; } versions.push(['v' + version, columns]); } } }); $.each(brands, function (name, y) { brandsData.push({ name: name, y: y, drilldown: versions ? name : null }); }); $.each(versions, function (key, value) { drilldownSeries.push({ name: key, id: key, data: value }); }); var chart = { type: 'column' }; var title = { text: 'Browser Market Share in November 2013' }; var subtitle = { text: 'Click the columns to view versions. Source: .com.' }; var xAxis = { type: 'category' }; var yAxis ={ title: { text: 'Market Share Percentage' } }; var tooltip = { headerFormat: '{series.name}
', pointFormat: '{point.name}: {point.y:.2f}% of total
' }; var credits = { enabled: false }; var series= [{ name: 'Brands', colorByPoint: true, data: brandsData }]; var drilldown= { series: drilldownSeries } var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.credits = credits; json.series = series; json.drilldown = drilldown; $('#container').highcharts(json); } });});

 Browser Version Total Market Share Microsoft Internet Explorer 8.0 26.61% Microsoft Internet Explorer 9.0 16.96% Chrome 18.0 8.01% Chrome 19.0 7.73% Firefox 12 6.72% Microsoft Internet Explorer 6.0 6.40% Firefox 11 4.72% Microsoft Internet Explorer 7.0 3.55% Safari 5.1 3.53% Firefox 13 2.16% Firefox 3.6 1.87% Opera 11.x 1.30% Chrome 17.0 1.13% Firefox 10 0.90% Safari 5.0 0.85% Firefox 9.0 0.65% Firefox 8.0 0.55% Firefox 4.0 0.50% Chrome 16.0 0.45% Firefox 3.0 0.36% Firefox 3.5 0.36% Firefox 6.0 0.32% Firefox 5.0 0.31% Firefox 7.0 0.29% Proprietary or Undetectable 0.29% Chrome 18.0 - Maxthon Edition 0.26% Chrome 14.0 0.25% Chrome 20.0 0.24% Chrome 15.0 0.18% Chrome 12.0 0.16% Opera 12.x 0.15% Safari 4.0 0.14% Chrome 13.0 0.13% Safari 4.1 0.12% Chrome 11.0 0.10% Firefox 14 0.10% Firefox 2.0 0.09% Chrome 10.0 0.09% Opera 10.x 0.09% Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09% 

The output of the above example is: [Highcharts Column Chart](#)