Highcharts - Percentage Area Chart

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Following is an example of a percentage Area Chart.

Let us understand additional configurations here. We have added the stacking attribute in plotoptions.

plotOptions

The plotOptions is a wrapper object for configuration 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.area.stacking as "percent". Possible values are null which disables stacking, "normal" stacks by value and "percent" stacks the chart by percentages.

var plotOptions = {
   area: {
      stacking: 'percent',
      lineColor: '#666666',
      lineWidth: 1,
      
      marker: {
         lineWidth: 1,
         lineColor: '#666666'
      }
   }
};

Example

highcharts_area_percentage.htm

Live Demo 
<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: 'percent',
                  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