1

I'm using highcharts to create a simple heatmap, but now I want to use custom border colors on the cells to represent another dimension in my data set. I am able to accomplish this with the borderColor config option on the data points, but the border of each cell gets drawn partly on top of the border of the preceding cells, so it looks sort of goofy.

Is there a way to specify a margin for the border so that my border gets drawn completely inside the boundary of the cell, so that there is no overlapping of borders? Or is there a way to custom-draw my own border through some event?

You can see this effect in the fiddle at http://jsfiddle.net/8ft7e923/1/ and in the image below. Note how the orange border is drawn over the green and the red is drawn over the orange. This overlapping is what I am trying to eliminate.

enter image description here

Chris Farmer
  • 24,974
  • 34
  • 121
  • 164
  • 1
    From my understanding this is a limitation of SVG elements described here: http://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn – Halvor Holsten Strand May 20 '16 at 20:19

1 Answers1

0

It is possible to add pixel padding for a heatmap series and set borderWidth to double of set padding.

Example: http://jsfiddle.net/jk9hp3y9/2/

Example based on your demo: http://jsfiddle.net/8ft7e923/2/

As Halvor mentioned - it is not yet possible to set border for SVG elements to be placed inside of element.

Another way could be to extend Highcharts (similar as in provided demos) to change size of cells with border set to make them fit in same place as the ones without border. More about extending Highcharts in Docs.

Kacper Madej
  • 7,846
  • 22
  • 36