Responsive

[Josephdias92]

the shapes are not rendered properly if the screen width changes. any quick fix for this issue?

[pawelfus]

Could you create a jsFiddle with this issue? I am not sure what do you mean by "not rendered properly".

Demo: https://jsfiddle.net/7m3Mr/359/ - as expected, some of the annotations are linked to x/y values, and their positions are the same as values (eg "drag me horizontaly"). Other annotations are rendered using pixels positions and those positions are not changed (eg "drag me anywhere").

[Josephdias92]

when i create some annotation and save them in my database. then go to some other device with difference screen resolution then annotations dont get rendered properly.

[pawelfus]

Could you show me an example of that saved annotation? I mean the configuration object.

[Josephdias92]

[{"xAxis":0,
"yAxis":0,
"shape":{
"type":null
},
"anchorX":"left",
"anchorY":"top",
"events":{

},
"xValue":1447006742694.0344,
"yValue":276.40449438202245,
"allowDragX":true,
"allowDragY":true,
"title":{
"style":{
"color":"rgba(255, 0, 0, 0.6)",
"fontSize":"1em"
},
"text":"dsd"
}
},
{
"xAxis":0,
"yAxis":0,
"shape":{
"params":{
"stroke":"rgba(204, 0, 0, 0.6)",
"fill":"rgba(0,0,0,0)",
"stroke-width":2,
"width":110,
"height":91,
"x":0,
"y":0
},
"type":"rect"
},
"anchorX":"left",
"anchorY":"top",
"events":{

},
"xValue":1447006634336.28,
"yValue":264.60674157303373,
"allowDragX":true,
"allowDragY":true
},
{
"xAxis":0,
"yAxis":0,
"shape":{
"params":{
"stroke":"rgba(204, 0, 0, 0.6)",
"fill":"rgba(0,0,0,0)",
"stroke-width":2,
"d":[
"M",
0,
0,
"L",
-73.0000001744504,
137
]
},
"type":"path"
},
"anchorX":"left",
"anchorY":"top",
"events":{

},
"xValue":1447006793297.6558,
"yValue":278.3707865168539,
"allowDragX":true,
"allowDragY":true,
"xValueEnd":1447006753144.7822,
"yValueEnd":143.67977528089887
}
]

[pawelfus]

Thanks!

Here are two demos with different widths:

• 600px: https://jsfiddle.net/7m3Mr/363/
• 900px: https://jsfiddle.net/7m3Mr/364/

Both demos work looks the same on mac and mobile device. Could you update one of the demos above to reproduce the issue? Thanks!