ZingChart: 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> tag's size. If the parent <code><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%'
...
});
I'n the newer versions of ZingChart (v2.4.0+) all chart height and width are determined by the container <div> and the zingchart.render() function. A standard <div> element has a width of 100%. In the zingchart.render({}) if you define height/width 100% the <div> has no height (no DOM content before zingchart.render()) so we defaults to 400px. This is done internally by the library. If you truly want a responsive height you need to adjust the CSS on the <div> and more importantly set a min-height in CSS.
#myChart {
height:100%;
width:100%;
min-height:150px;
}
Example: https://demos.zingchart.com/view/05MO9JIM
Media Rules Resizing
If you have a resizable container you won't have to change anything you have done so far since the chart fits the size of the parent container. There is one caveat, we have an special flag called DEBOUNCESPEED which prevents the chart from rendered a bunch of times when dragging windows or containers. You can adjust that speed. The default is set to 250 which is quite high, but makes sense if you have a dashboard of charts and don't want them all clogging the browser when resizing. This variable is global to all charts on the page since it is directly modifying the zingchart object.
Example: https://demos.zingchart.com/view/DYURPBCP
JavaScript Resizing
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.