ZingChart: How do I center a gauge chart inside the div
There are a couple ways you can center your gauge charts. Both methods are dependent on the DOM components where the charts are rendered to. You would typically use CSS margins to center the chart or in other more recent attributes like flexbox.
Using A Chart Container and margins
The easiest example just contains a container to wrap your chart div and center that using margin:auto
.chart-container {
background-color:#c3c3c3;
min-height:150px;
}
#myChart {
margin:auto;
height:500px;
width:500px;
}
Example: https://demos.zingchart.com/view/embed/LABPCJ0T
Using A Chart Container and flexbox
You could easily achieve the above example with flexbox.
.chart-container {
background-color:#c3c3c3;
display:flex;
flex-direction:column;
align-items: center;
min-height:150px;
}
#myChart {
height:500px;
width:500px;
}
Example: https://demos.zingchart.com/view/embed/QPG964CP
Manipulating the ZingChart Dom
You could also take advantage of the dynamically created ZingChart DOM. If your id attribute is myChart then you could access a dynamically generated
#myChart-wrapper to apply the same concepts described above.
Note differences from the previous examples in the zingchart.render and the CSS.
#myChart {
height:100%;
width:100%;
}
#myChart-wrapper {
margin:auto;
}
Example: https://demos.zingchart.com/view/embed/DUGQ9FC6