- Highcharts Tutorial
- Highcharts - Home
- Highcharts - Overview
- Highcharts - Environment Setup
- Highcharts - Configuration Syntax
- Highcharts - Line Charts
- Highcharts - Area Charts
- Highcharts - Bar Charts
- Highcharts - Column Charts
- Highcharts - Pie Charts
- Highcharts - Scatter Charts
- Highcharts - Bubble Charts
- Highcharts - Dynamic Charts
- Highcharts - Combinations
- Highcharts - 3D Charts
- Highcharts - Angular Gauges
- Highcharts - Heat Maps
- Highcharts - Tree Maps
- Highcharts Useful Resources
- Highcharts - Quick Guide
- Highcharts - Useful Resources
- Highcharts - Discussion
Stacked Column Chart with Percentages
Following is an example of a stacked Column Chart with percentages.
We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Let us now see additional configurations and also how we have added stacking attribute in plotoptions.
An example of a stacked column chart with percentages is given below.
plotOptions
The plotOptions is a wrapper object for configurations objects for each series type. The configuration objects for each series can also be overridden for each series item as given in the series array. This is to stack the values of each series on top of each other.
Configure the stacking of the chart using plotOptions.column.stacking as "percent". The possible values are null which disables stacking, "normal" stacks by value and "percent" stacks the chart by percentages.
var plotOptions = { column: { stacking: 'percent' } };
Example
highcharts_column_percentage.htm
<html> <head> <title>Highcharts Tutorial</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src = "https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div> <script language = "JavaScript"> $(document).ready(function() { var chart = { type: 'column' }; var title = { text: 'Stacked column chart' }; var xAxis = { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }; var yAxis = { min: 0, title: { text: 'Total fruit consumption' } }; var tooltip = { pointFormat: '<span style = "color:{series.color}">{series.name}</span> : <b>{point.y}</b> ({point.percentage:.0f}%)<br/>', shared: true }; var plotOptions = { column: { stacking: 'percent' } }; var credits = { enabled: false }; var series = [ { name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, 2, 3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, 2, 5] } ]; var json = {}; json.chart = chart; json.title = title; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.plotOptions = plotOptions; json.credits = credits; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
Result
Verify the result.