Highcharts - Area Chart using Spline

Following is an example of a Area Chart using using spline.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, we will see an example of an Area Chart using spline. We will also understand additional configuration. We have changed the type attribute in chart.

chart

Configure the chart type to be 'areaspline' based. chart.type decides the series type for the chart. Here, the default value is "line".

var chart = {
   type: 'areaspline'  
};

Example

highcharts_area_spline.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: 'areaspline'	  
            };
            var title = {
               text: 'Average fruit consumption during one week'   
            }; 
            var subtitle = {
               style: {
                  position: 'absolute',
                  right: '0px',
                  bottom: '10px'
               }
            };
            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: ['Monday','Tuesday','Wednesday','Thursday',
                  'Friday','Saturday','Sunday']      
            };
            var yAxis = {
               title: {
                  text: 'Fruit units'
               }
            };
            var tooltip = {
               shared: true,
               valueSuffix: ' units'
            };
            var credits = {
               enabled: false
            }
            var plotOptions = {
               areaspline: {
                  fillOpacity: 0.5
               }
            };
            var series = [
               {
                  name: 'John',
                  data: [3, 4, 3, 5, 4, 10, 12]
               }, 
               {
                  name: 'Jane',
                  data: [1, 3, 4, 3, 3, 5, 4]
               }
            ];
      
            var json = {};
            json.chart = chart; 
            json.title = title;
            json.subtitle = subtitle; 
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.legend = legend;
            json.plotOptions = plotOptions;
            json.credits = credits;
            json.series = series;
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_area_charts.htm