CODEWITHSUNDEEP
javascripthighchartsheatmap
ilyaU
ilyaU

Reputation: 29

Glossy Heatmap Highcharts

Is there a way to add a glossy finish to a heatmap using highcharts to make it look less 2 dimensional.

Here's an example of a type of heatmap I'd like the finish to be added on to:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/heatmap/

I'm guessing that it would be an addition into:

plotOptions:{
   heatmap:{
      color: {}
   }
}

But in a heatmap the colors vary so I can't impose a common gradient on it.

Upvotes: 0

Views: 176

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

You can change how color is calculated in the colorAxis, for example wrap tweenColors method and apply a gradient:

  (function(H) {
    H.wrap(H.ColorAxis.prototype, 'tweenColors', function(p, from, to, pos) {
      var ret = p.call(this, from, to, pos);

      return {
        radialGradient: {
          cx: 0.1,
          cy: 0.1,
          r: 0.7
        },
        stops: [
          [0, ret],
          [1, Highcharts.Color(ret).brighten(0.2).get('rgb')]
        ]
      }
    });
  })(Highcharts);

Demo: http://jsfiddle.net/nkukv1g4/2/

Upvotes: 1

Related Questions