eChart not responsible

I’ve never really worked with JavaScript so i probably doing something stupid. But for some reason a echart I am using isn’t responsive in line with how a div resizes upon screen size. I’m using bootstrap for CSS.

I think i have followed the documentation correctly on https://echarts.apache.org/examples/en/editor.html?c=gauge-grade

But for me it doesn’t resize or seem to be anchored to a div.

                <div class="col-sm-12 col-md-3 col-lg-3 col-xl-2">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="card-item">
                            <div class="card-item-icon card-icon">
                                <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect height="14" opacity=".3" width="14" x="5" y="5"/><g><rect fill="none" height="24" width="24"/><g><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z"/><rect height="5" width="2" x="7" y="12"/><rect height="10" width="2" x="15" y="7"/><rect height="3" width="2" x="11" y="14"/><rect height="2" width="2" x="11" y="10"/></g></g></g></svg>
                            </div>
                            <div class="card-item-title mb-2">
                                <label class="main-content-label tx-13 font-weight-bold mb-1">Chart</label>
                                <span class="d-block tx-12 mb-0 text-muted">Current</span>
                            </div>
                            <div class="card-item-body">
                                <div class="card-item-stat">
                                    <div id="main" style="width: 200px;height:200px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <script type="text/javascript">
            var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 1,
      splitNumber: 4,
      axisLine: {
        lineStyle: {
          width: 6,
          color: [
            [0.33, '#FF6E76'],
            [0.66, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '50%',
        width: 20,
        offsetCenter: [0, '-30%'],
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        length: 12,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      splitLine: {
        length:20,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      axisLabel: {
        color: '#464646',
        fontSize: 10,
        distance: -60,
        formatter: function (value) {
          if (value === 0.875) {
            return 'A';
          } else if (value === 0.625) {
            return 'B';
          } else if (value === 0.375) {
            return 'C';
          } else if (value === 0.125) {
            return 'D';
          }
          return '';
        }
      },
      title: {
        offsetCenter: [0, '-20%'],
        fontSize: 30
      },
      detail: {
        fontSize: 15,
        offsetCenter: [0, '0%'],
        valueAnimation: true,
        formatter: function (value) {
          return Math.round(value * 100) + '分';
        },
        color: 'auto'
      },
      data: [
        {
          value: 0.7,  
        }
      ]
    }
  ]
};

option && myChart.setOption(option);