Highmaps label centering in irregular path

Question

While working on Highmap to display some sort of data according of an area coverage. I was able to create the map with bubble chart type but I face one major problem, alignment! Each bubble is aligned to the area/path it belongs to; basically I have two series s1: {id, z, path} s2: {id, z, path} where these series are joinedBy: id field. I think Highmaps calculates the center according to the width and height of the path resulting some bubbles to be placed in another area. Is there any ways I can fix this by setting offset left/top per each path, since the paths are irregular and could have a different shapes?

Please refer to the attached image and this jsfiddle: http://jsfiddle.net/ycsp27cL/14/

Gray Bubble: actual bubbles created by Highmaps.
Red Bubble: the expected bubble area

@KacperMadej please see the jsfiddle example, you can clearly see 100 is off the targeted area, any thoughts? — Beakal, Nov 13 '15 at 14:48

score 1 · Accepted Answer · answered Nov 13 '15 at 16:37

1

It is possible to add:

    properties: {
        "hc-middle-x":0.5,
        "hc-middle-y":0.8
    },

to data point so you can establish position of center, used later in Highcharts. Scale is from 0 to 1, where 0 is most left/top and 1 is most right/bottom position of a path for x/y.

JSFiddle: http://jsfiddle.net/ycsp27cL/15/

answered Nov 13 '15 at 16:37

Kacper Madej

7,846
22
36

This was what I was looking for; properties per each path, thank you – Beakal Nov 14 '15 at 12:34

Highmaps label centering in irregular path

1 Answers1