Highcharts heatmap borders

Question

I have been using highcharts heatmaps to plot some data and I allow the user to click on the points. This used to draw a border around the heatmap using the following click behaviour,

selectedBorderColour = '#ff0000';

...
...
...

events: {
        click: function(event) {
                this.borderColor = thiss.selectedBorderColour;
                this.update();
        },
    }

Which was working fine until I updated the highcharts version from "highcharts": "8.0.4", to "highcharts": "^8.2.2".

Now it seems the border color no longer has an affect and even worse when you mouseover the squares they seem to change shape, becoming rectangles.

here is a reference I originally used Per-cell border colors in a highcharts heat map

Does anyone have any idea about how to get this working with newer version?

score 0 · Answer 1 · answered Dec 16 '20 at 12:55

There were a few changes in the code. The borderColor property is applied to the whole series.

In order to make it work as previously, I wrapped the pointAttribs methods and then applied the stroke-width and stroke property to the points graphic.

point: {
    events: {
      click: function(event) {
        event.point.graphic.attr({
          'stroke-width': 2,
          stroke: 'red'
        })
      },
    }
  }

Demo: https://jsfiddle.net/BlackLabel/95fcqxr4/

Highcharts heatmap borders

1 Answers1