title: Highcharts - apply gradient on custom colors
body: <p>This is my data model:</p>
  
  <pre><code>data = [{y: 123, color: "#FF7600"}, {y: 321, color: "#00FFE3"}, {y: 213,color: "#444444"}]
  </code></pre>
  
  <p>Then the series is added to a pie chart:</p>
  
  <pre><code>$http({ method: 'GET', url: /pie-chart, params: {})
      .success(function (data) {
          chart.addSeries({
          type: 'pie',
          data: data
      })
  });
  </code></pre>
  
  <p>Here's the official highcharts demo: <a href="http://www.highcharts.com/demo/pie-gradient" rel="nofollow">http://www.highcharts.com/demo/pie-gradient</a><br>
  It loops through data, read colors, creates color array and uses this array when drawing chart.<br>
  But i'm thinking about solution which avoids extracting colors from JSON.<br>
  Any idea? Thanks a lot.</p>
  
  <p><strong>Edited, solved</strong></p>
  
  <p>Gave it up :).<br> 
  I ended up creating color arrays as described in highcharts demo.<br>
  It works well. </p>
  
  <pre><code>// Get colors from received data, create color array, 
  var colors = [];
  for (var i = 0; i &lt; data[0].series.length; i++) {
      colors.push(data[0].series[i].color);
      // Delete original colors, so that new radialized are used
      delete(data[i].color);
  }
  
  // Use color array and radialize each color
  Highcharts.getOptions().colors = Highcharts.map(colors, function(color) {
      return {
          linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
              stops: [
                  [0, color],
                  [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
              ]
          };
      });
  </code></pre>