Highcharts - Area Chart with Missing Values

Following is an example of a Area Chart with missing values.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us see an example of an Area Chart with missing values.

We have added spacingBottom attribute in chart.

chart

Configure the spacingBottom of the chart as 30. It signifies the space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or legend in top position).

var chart = {
   type: 'area',
   spacingBottom: 30
};

Example

highcharts_area_missing.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',
               spacingBottom: 30
            };
            var title = {
               text: 'Fruit consumption *'   
            }; 
            var subtitle = {
               text: '* Jane\'s banana consumption is unknown',
               floating: true,
               align: 'right',
               verticalAlign: 'bottom',
               y: 15
            };
            var legend = {
               layout: 'vertical',
               align: 'left',
               verticalAlign: 'top',
               x: 150,
               y: 100,
               floating: true,
               borderWidth: 1,
               
               backgroundColor: (
                  Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 
                     '#FFFFFF'
            };
            var xAxis = {
               categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes',
                  'Plums', 'Strawberries', 'Raspberries']      
            };
            var yAxis = {
               title: {
                  text: 'Y-Axis'
               },
               labels: {
                  formatter: function () {
                     return this.value;
                  }
               }
            };
            var tooltip = {
               formatter: function () {
                  return '<b>' + this.series.name + '</b><br/>' +
                     this.x + ': ' + this.y;
               }
            };
            var plotOptions = {
               area: {
                  fillOpacity: 0.5
               }
            };
            var credits = {
               enabled: false
            };
            var series = [
               {
                  name: 'John',
                  data: [0, 1, 4, 4, 5, 2, 3, 7]
               }, 
               {
                  name: 'Jane',
                  data: [1, 0, 3, null, 3, 1, 2, 1]
               }
            ];     
      
            var json = {};   
            json.chart = chart; 
            json.title = title; 
            json.subtitle = subtitle; 
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.legend = legend;
            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