How to make Line charts developed using svg, responsive

Question

I have created a line chart in which I am setting the width and height of the line chart depending on the size of the container

"style": {
                "width": Math.round($('#' + container).width()) + "px",
                "height": Math.round($('#' + container).height()) + "px",
                "border": "1px solid silver",
                "position": "relative",
                "top": "0px"
            },

Initially the height and width of the container is 0 and hence the height of the svg is set with some default height and width

        defaultHeigth = 500;
        defaultWidth = 1163;
        chartConfiguration.chart.style.height = defaultHeigth;
        chartConfiguration.chart.style.width = defaultWidth;

Then while creating the svg I am setting the viewbox as

svgEle.setAttribute("viewBox", "0 0 " + chartConfigOptions.chart.style.width + " " + chartConfigOptions.chart.style.height);

svgEle.setAttribute("width", "100%");
svgEle.setAttribute("height", "100%");
svgEle.setAttribute("preserveAspectRatio", "none");

I have tried all sorts of preserveAspectRatio like xMidYMid meet

But in firefox on default load it throws NS_ERROR_FAILURE: and when re-sizing the window size the chart gets rendered perfectly inside the container In other browsers the chart is rendering but its somewhat distorted(like axis points and values are overlapping) and on resizing the window it renders fine.

Probably best if you create a runnable example e.g. a stack snippet or a jsfiddle. — Robert Longson, Nov 02 '15 at 22:38
The thing is I cannot share the whole code because it holds copyrights. I am just referring that code. — Darshan Pawar, Nov 03 '15 at 13:19
Excellent, because we don't want the whole code, we want a [mcve] — Robert Longson, Nov 03 '15 at 20:49
Thanks. I got it resolved. I was making a mistake that I was calling the rendering of line chart before the creation of DOM — Darshan Pawar, Nov 08 '15 at 03:03

How to make Line charts developed using svg, responsive

0 Answers0