Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Highcharts Stacked and Grouped Column Chart Example
Keywords : Highcharts create stacked chart with column grouping example, How to create stacked and grouped column chart using highcharts with example, Stacked column chart with grouping example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts Stacked and grouped column Chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { var chartype = { type: 'column' } var chartitle = { text: 'Total fruit consumtion, grouped by gender' } var chartxaxis = { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] } var chartyaxis = { allowDecimals: false, min: 0, title: { text: 'Number of fruits' } } var chartooltip = { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal; } } var chartplotoptions = { column: { stacking: 'normal' } } var chartseries = [{ name: 'John', data: [5, 3, 4, 7, 2], stack: 'male' }, { name: 'Joe', data: [3, 4, 4, 2, 5], stack: 'male' }, { name: 'Jane', data: [2, 5, 6, 2, 1], stack: 'female' }, { name: 'Janet', data: [3, 0, 4, 4, 3], stack: 'female' }] $('#container').highcharts({ chart:chartype, title: chartitle, xAxis: chartxaxis, yAxis:chartyaxis, tooltip:chartooltip, plotOptions:chartplotoptions, series: chartseries }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
Click Here to See Result
Result
Previous
Next