How to configure ZingChart width and height?

Question

I'm trying to use ZingChart. Trying to build gauge widget. Question is for those who worked with zingChart. How to configure width and height of space around chart. So here is what i'm saying about:

White container is a div with 100% width and height. All yellow space is plotarea of the zingChart, and in the center is gauge.

I want to cut all yellow space at the top and bottom around gauge. How to configure that?

Here is my chart config in react:

import React from 'react'
import './PlanGauge.sass'
import 'zingchart/es6'
import ZingChart from 'zingchart-react'
import WidgetTile from '../WidgetTile/WidgetTile'

function PlanGauge({ title }) {
  const widgetConfig = {
    minValue: 0,
    maxValue: 150000,
    currentValue: 100000,
  }

  const chartConfig = {
    type: 'gauge',
    'scale-r': {
      aperture: 180,
      values: `${widgetConfig.minValue}:${widgetConfig.maxValue}`,
      ring: {
        size: 12,
        'background-color': '#F2F4F6',
        tick: {
          visible: false,
        },
      },
      center: {
        visible: false,
      },
      tick: {
        visible: false,
      },
      item: {
        //Scale Label Styling
        visible: false,
      },
    },
    plot: {
      size: '100%',
    },
    series: [
      {
        values: [widgetConfig.currentValue],
        'background-color': '#000',
        'border-color': 'red',
        indicator: [4, 4, 0, 0, 0.9],
      },
    ],
    plotarea: {
      marginTop: 0,
      marginBottom: 0,
      backgroundColor: 'yellow',
    },
  }
  return (
    <WidgetTile title={title}>
      <ZingChart data={chartConfig} />
    </WidgetTile>
  )
}

export default PlanGauge

Answer 1

Please set padding in the ZingChart configuration's plot object to control the area around it. The Plot object controllers the styling of the chart.

Answer 2

Set margin in the ZingChart configuration. plotarea: { margin: '0 0 0 0', },

It works for me.