Make Charts Scalable/Responsive

[unclesnottie]

Currently building a chart in Rickshaw using Rickshaw.Graph.Axis.* creates SVG images but then fixes the height and width in pixels and positions elements using pixels. This means it draws a scalable image and positions it in a non-scalable way. Any time a chart needs to be resized, see Responsive web design, the window resize event must have a handler to redraw the chart using Javascript. This is very inefficient. Pages with multiple charts can bring a browser to it's knees even if you debounce the window resize event handler.

Rickshaw should render the SVG element with a 100% width and height using an appropriate viewBox to establish the proportions. This allows the actual chart size to be controlled in CSS and would not require javascript to resize. If absolutely positioning element is a must, then use percentages rather than pixels so it will scale.

[gregz67]

+1 We are seeing the same issue and are wondering if this is a pull request that would have a chance of being accepted.

[unclesnottie]

I have not seen any pull request for this (though I really haven't looked hard). There are a few problems which I've noticed. As stated before, Rickshaw currently fixes the width and height of the SVG element. The second problem I've noticed is that some of the interactive elements built on top of the SVG are absolutely positioned elements that are aligned with pixels. For this to be fixed and fully responsive, these overlay elements would also have to be positioned differently (probably with % rather than px).

[carl0zen]

+1 to this,

[aucontraire]

+1 to this

[tsareg]

+1

[shlima]

+1

[ghost]

+1

[Mart-Bogdan]

bump +1

[thure]

You can put in your own viewBox if needed:

var svg = graph.element.querySelector('svg'),
      w = svg.getAttribute('width'),
      h = svg.getAttribute('height');

  svg.removeAttribute('width');
  svg.removeAttribute('height');

  if(w && h) svg.setAttribute('viewBox', [0, 0, w, h].join(' '));

[unclesnottie]

@thure I don't think the viewBox helps. The issue is not with SVG elements but rather with DOM elements positioned with pixels.