CODEWITHSUNDEEP
heatmapreact-highcharts
Devika B
Devika B

Reputation: 49

HeatMap with custom muticolors for some cell

i'm trying to generate a heatmap with custom colors for each cell based on the coordinates/ x and y axis points. And y-axis is divided unequally in x4 if I hover on that cell it changes color how to fix it

http://jsfiddle.net/2m3sqckj

enter image description here

below given are my points

            [{x:4,y:0, value:90, color:'red'},
            {x:4,y:0.5, value:90, color:'orange'},
            {x:4,y:1.2, value:90, color:'red'},
            {x:4,y:3, value:90, color:'yellow'},
            {x:4,y:4, value:90, color:'yellow'}]

Upvotes: 0

Views: 352

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

After digging into this issue I found that it might be an intentional behaviour. Please take a look at this thread: https://github.com/highcharts/highcharts/issues/6064 If you have another opinion - feel free to share it in the comment.

Meanwhile, I found a workaround for your issue: http://jsfiddle.net/BlackLabel/yfaj1ro3/

Setting higher Index for points.

  Highcharts.seriesTypes.heatmap.prototype.pointClass.prototype.setState = function(state) {
    var point = this,
            zIndex = point.zIndex || 0;
    Highcharts.Point.prototype.setState.call(this, state);
    this.graphic.attr({
      zIndex: zIndex
    });
  };

Upvotes: 0

Related Questions