- 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
Highcharts - Stacked Area Chart
Following is an example of a stacked Area Chart.
We have already seen the configurations used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us see an example of a stacked Area Chart.
plotOptions
The plotOptions is a wrapper object for configuration objects for each series type. The configuration objects can 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.area.stacking as "normal". Possible values are null which disable stacking, "normal" stacks by value and "percent" stacks the chart by percentages.
var plotOptions = { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } };
Example
highcharts_area_stacked.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: 'area' }; var title = { text: 'Historic and Estimated Worldwide Population Growth by Region' }; var subtitle = { text: 'Source: Wikipedia.org' }; var xAxis = { categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], tickmarkPlacement: 'on', title: { enabled: false } }; var yAxis = { title: { text: 'Billions' }, labels: { formatter: function () { return this.value / 1000; } } }; var tooltip = { shared: true, valueSuffix: ' millions' }; var plotOptions = { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }; var credits = { enabled: false }; var series = [ { name: 'Asia', data: [502, 635, 809, 947, 1402, 3634, 5268] }, { name: 'Africa', data: [106, 107, 111, 133, 221, 767, 1766] }, { name: 'Europe', data: [163, 203, 276, 408, 547, 729, 628] }, { name: 'America', data: [18, 31, 54, 156, 339, 818, 1201] }, { name: 'Oceania', data: [2, 2, 2, 6, 13, 30, 46] } ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; 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.
highcharts_area_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google