Import fiddle as a JS Module - chain fiddles together

by hendrikdegraaf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts-more.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/boost.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/no-data-to-display.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/pattern-fill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/solid-gauge.js"></script>
<div id="container"></div>

CSS

#container {
  height: 200px;
  border: 1px solid magenta;
}

JavaScript

import H from 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.js'
import HM from 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts-more.js'
import HB from 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/boost.js'
import HE from 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/exporting.js'
import HNDTD from 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/no-data-to-display.js'
import HPF from 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/pattern-fill.js'
import HSG from 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/solid-gauge.js'

// apply
HM(H)
HSG(H)
HNDTD(H)
HE(H)
HPF(H)
HB(H)

const containerEl = document.getElementById('container')
const config = {
    chart: {
        type: 'pie',
        renderTo: containerEl,
        spacingTop: 20,
        style: {
            fontFamily: 'Roboto,Helvetica Neue,Helvetica,Arial,sans-serif',
        },
        events: {},
    },
    title: {
        margin: 30,
        align: 'center',
        style: {
            color: '#212934',
            fontSize: '18px',
            fontWeight: 'normal',
            fontStyle: 'normal',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
        },
        text: '2024 - Fully Immunized child',
    },
    subtitle: {
        align: 'center',
        style: {
            color: '#4a5768',
            fontSize: '13px',
            fontWeight: 'normal',
            fontStyle: 'normal',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
        },
    },
    yAxis: [
        {
            min: 0,
            title: {
                text: null,
            },
            gridLineColor: '#F1F1F1',
            labels: {
                style: {
                    color: '#404b5a',
                    fontSize: '11px',
                    fontWeight:...