How do I make the graph responsive?

There are few things to know before tackling ZingChart. Since you are binding your charts to a Div there is a mix between ZingChart, HTML & CSS. ZingChart parameters like height and width are relative to the parent Div's size. If the parent Div is 600px wide and 600px tall, then rendering ZingChart at 100% width and height will fill that container. 

zingchart.render({
  height:'100%',
  width:'100%'
...
});

These render options will fill that Div completely. Here is a fun example of how ZingChart interacts with the DOM.

 

There are some things that are static in ZingChart, like labels for example. Labels are rendered once, but that doesn't mean they can't be responsive. One of the benefits about ZingChart is how proficient our API is. You can use our API, with Javascript, to seamlessly re-render the labels based on the viewport size.  You can mess around by resizing the window horizontally.

https://demos.zingchart.com/view/3MW12SRE

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.