Area spline chart creation - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Area spline chart creation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from w  w w .  ja  v  a 2 s . co m*/
$(function () {
    var categories = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var data1 = [4,8,4,10,4,16,15];
    var data2 = [3,5,3,11,4,13,9,5,2,3,2,1];
    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
         title: {
            text: 'Average fruit consumption during one week'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        yAxis: {
            title: {
                text: 'Fruit units'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' units'
        },
        credits: {
            enabled: false
        },
        colors: ['#1ab394', '#464f88'],
        plotOptions: {
            areaspline: {
                fillOpacity: 0.4
            }
        },
        xAxis: {
            tickmarkPlacement: 'on',
            gridLineWidth: 1,
            categories: categories
        },
        series:  [{
            name: '2014',
            data: data1
        }, {
            name: '2013',
            data: data2
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials