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 <div>  with the CSS selector #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 

Documentation

Did this answer your question?