CODEWITHSUNDEEP
javascriptcsshighcharts
void
void

Reputation: 36703

Gradient in column highcharts

I am plotting a column chart using highcharts but what I want is the color to be gradient across all the columns, i.e. each column should have a different color.

I am able to put n-gradient in n-column but not a single across gradient across the complete graph.

Attaching the brief idea: enter image description here

Upvotes: 3

Views: 2735

Answers (1)

wergeld
wergeld

Reputation: 14442

This was an interesting idea so I took a stab at it. I was able to get it something approaching what you want using a variant of the Highcharts monochrome fill PIE demo. The tricky part is knowing how many data you have so that the brightness calculation doesn't get maxed out before end of series. If you know how many data points you are going to have you can pre-fill the prototype or you can make it a function that takes number of points as a param. Anyway, here is my attempt:

$(function() {
  // Make monochrome colors and set them as default for all pies
  Highcharts.getOptions().plotOptions.column.colors = (function() {
    var colors = [],
      base = '#e2535c', //Set to the starting color you want.
      i;
    // This is the part you need to setup. 
    //The "50" is just some arbitrarily large value for this demo.
    for (i = 0; i < 50; i += 1) {
      // Start out with a darkened base color (negative brighten), and end
      // up with a much brighter color
      // I modified the math here to use 25 as the increment.
      // Your needs may vary.
      colors.push(Highcharts.Color(base).brighten((i - 3) / 25).get());
    }
    return colors;
  }());

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
      column: {
        colorByPoint: true // This needs to be true.
      }
    },
    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
  });
});

Live demo. I am pretty sure this can be done in another way but this got me 90% of the way there.

After some more searching of methods that can generate color gradients in javascript I came across RainbowVis-JS. This lets you set the start and end color (along with any itermediate colors) as well as how many stops you need. I Set up a way to do this with the chart.events.load method. What I am doing is getting how many points are in my series.data and setting it as the range. Then I loop over the data points in the data and using the index value I return the color and update the point with Point.update:

chart: {
  renderTo: 'container',
  type: 'column',
  events: {
    load: function() {
      var rainbow = new Rainbow();
      // Set start and end colors
      rainbow.setSpectrum('#e2535c', '#ea9056');

      // Set the min/max range
      var theData = this.series[0].data;
      var rangeLow = 0;
      var rangeHigh = theData.length
      rainbow.setNumberRange(rangeLow, rangeHigh);

      // Loop over data points and update the point.color value
      for (index = 0; index < theData.length; ++index) {

        this.series[0].data[index].update({
          color: '#' + rainbow.colourAt(index)
        });
      }
    }
  }
},

Demo.

Upvotes: 7

Related Questions