Create linear Gradient color for series - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Create linear Gradient color for series

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from www  .  j  av  a 2s  . c  o m
const data = [50, 95, 124, 78, 60, 108, 108, 120, 155, 87, 57, 76]
const colors = Highcharts.getOptions().colors
const options = {
  plotOptions: {
    bar: {
      pointWidth: 10
    }
  },
  tooltip: {
    enabled: false
  },
  series: [{
    color: {
      linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
      },
      stops: data.map((v, i) => {
         return [
           i/data.length, v > 100 ? colors[5] : colors[0]
        ]
      })
    },
    data: [100],
    type: 'bar'
  }]
}
const chart = Highcharts.chart('container', options)
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials