title: How to create area range with line highchart
body: <p>I want to create chart with Highchart. <br>
  actually I use area range and line. <br>
  but it doesn't work since my code below <br></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var chart1;
      $(document).ready(function() {
          chart1 = new Highcharts.Chart({
          chart: {
              renderTo: 'chartPlace',
          },
          title: {
              text: ''
          },
          xAxis: {
             type: 'linear'
          },
          yAxis: {
             title: {
                 text: null
             }
              },
          series: [{
             name: 'KL - SCOC',
             marker: {
              fillColor: 'white',
              lineWidth: 2,
              lineColor: Highcharts.getOptions().colors[0]
             },
             zIndex: 1,
             data: [['Jan',19],['Feb',21],['Mar',18],['Apr',12],['May',26],['Jun',20],['Jul',6]]
          }, {
             name: 'Range',
             data: [['Jan',77,3],['Feb',98,2],['Mar',83,4],['Apr',75,3],['May',76,2],['Jun',77,3],['Jul',9,3]],
             type: 'arearange',
             lineWidth: 0,
             linkedTo: ':previous',
             color: Highcharts.getOptions().colors[0],
             fillOpacity: 0.3,
             zIndex: 0
          }]
         });
       });
  &lt;/script&gt;
  </code></pre>
  
  <p>The error output is </p>
  
  <blockquote>
    <p>Uncaught TypeError: undefined is not a function </p>
  </blockquote>
  
  <p>so how to solve this matter.
  Thanks in advance.</p>