linearGradient fill with fixed upper bound in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

linearGradient fill with fixed upper bound in line chart

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-3.1.1.js"></script> 
      <script type="text/javascript">
$(function() {//  ww w. j  a v a 2 s .com
  function adjustGradient() {
    document.getElementsByTagName('linearGradient')[0].setAttributeNS(null, 'y2', this.plotHeight);
  }
  Highcharts.chart('container', {
    chart: {
      events: {
        load: adjustGradient,
        redraw: adjustGradient
      }
    },
    yAxis: {
      max: 100,
      min: 0
    },
    series: [{
      data: [0, 10, 20, 30],
      type: 'areaspline',
      fillColor: {
        linearGradient: [0, 0, 0, 0],
        stops: [
          [0, 'rgb(0,0,255)'],
          [1, 'rgb(255, 255, 255)']
        ]
      }
    }]
  }, function() {
  });
btn.onclick = function () {
  Highcharts.charts[0].setSize(null, 200)
}
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px"></div> 
      <button id="btn"> resize </button>  
   </body>
</html>

Related Tutorials