On making chart responsive the x,y axis line disappears .

[aksha...@gmail.com]

Hi Folks ,

I made my chart Responsive , but what i noticed was on resize the line of x,y axis was disappearing . 

I am sharing the plnkr link here .

There are 2 charts one with smaller size ,  other with bigger one . Here u can see that the chart with bigger size is showing x,y axis line but in the smaller graph the x,y axis line is not visible .  Is there any possible way in which we can make the chart responsive but still the x,y axis line will be viible .

Any help is appreciated . 

Thanks in advance .

[Curran]

Hello,

It looks like the scaling transform (via viewbox) is making the axis line end up to be less than 1 pixel thick, so it disappears. It seems to reappear if you resize the chart to make it big again, so I think the line DOM element is always there.

Since the viewbox is scaling the chart container, even if you set the line width to, say 2px, that gets scaled down. Maybe one approach would be to dynamically set the line to be thicker such that the scaled version is always a fixed value, say 2px. Do do this you'd need to reach into the axis DOM and set the line weight according to the ratio between the unscaled size and the current viewbox size.

I'm not sure what exactly the math would look like, but imagine the unscaled height is 500px, and the viewbox is 500px wide, then you can set the line weight to 2px (scaled == actual). If you scale down the viewbox to, say 250px wide, you can set the line weight to 4px to make it appear as 2px. You can build a table of the line weights you'd need to set in order to make it appear as 2px in the scaled version, like this:

• Original width 500px, scaled width 500px, line weight 2px.
• Original width 500px, scaled width 250px, line weight 4px.
• Original width 500px, scaled width 125px, line weight 8px.
• Original width 500px, scaled width 62.5px, line weight 16px.

From this you can derive a general formula.

Best regards,

Curran