create highlight area under curve in line chart? - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

create highlight area under curve in line chart?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.src.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
var chart = Highcharts.chart('container', {
   plotOptions: {/*from ww  w .  j  ava  2s . c  om*/
     polygon: {
       showInLegend: false
    }
  },
   yAxis: {
     tickInterval: 1,
     plotLines: [{
       value: 4,
      color: 'orange',
      width: 2
    }, {
       value: 3,
      color: 'red',
      width: 2
    }]
  },
  series: [{
    data: [6, 4, 3, 1, 2, 3, 4, 7]
  }, {
     type: 'polygon',
    data: [[1,4], [2, 4], [2,3]],
    color: 'orange'
  }, {
     type: 'polygon',
    data: [[5,4], [6, 4], [5,3]],
    color: 'orange'
  }, {
     type: 'polygon',
    data: [[2,3], [5, 3], [4,2], [3,1], [2,3]],
    color: 'red'
  }]
});

      </script>  
   </body>
</html>

Related Tutorials