You can see after i change browser's size,series data drawing could be auto resizing correspondingly well,but rectangle SVG element just keeps bond with pixels position in windows,
This is just ridiculous ,so now i must reassign this svg 's pixels values by toPixels function again and again in some resizing redrawing,zooming event handler and bla bla bla(not clear it will get how many scenarios to handle),
Is there any setting to let rectangle such SVG elements to bind with series data and x-axis index number but not with the pixels?
What i expect,no matter you resize,reflow,zoom in or out,the rectangle such SVG elements just go with x-axis index number and series data y. namely,auto re-positioning,auto resizing accompanying with x-axis index number and series data y
I just can't understand why Highcharts SVG be designed like this,making things really trouble,it's really uncomfortable compared with some traditional plotting modules such as matplotlib. Thanks!
Your requirement is basically to make the red rectangle behave like a series (in terms of responsiveness).
Highcharts offers polygon type of series which would be a good solution for this case if rounded corners weren't your requirement (polygon doesn't support them).
It seems that appropriately styled columnrange series gets the job done (thanks to borderRadius property):
{
groupPadding: false,
pointPadding: 0,
borderRadius: 10,
showInLegend: false,
borderColor: 'red',
borderWidth: 2,
color: 'none',
type: 'columnrange',
pointRange: 4,
data: [{
x: 3,
low: 1,
high: 24,
}]
pointRange works in both directions, so if it equals to 4 and x equals to 3 the column will span from 1 to 5. groupPadding: false and pointPadding: 0 causes that rectangle represents exact values.
Live demo: http://jsfiddle.net/BlackLabel/gd0v9Lop/
API reference: https://api.highcharts.com/highcharts/s