JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/math-modifier.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>

<div id="container"></div>
<div id="popup">
    <div class="container">
        <div id="datagrid-container"></div>
        <button class="close">&times;</button>
    </div>
</div>

<pre...

CSS

@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");
@import url("https://code.highcharts.com/datagrid/css/datagrid.css");

/* Dashboards */

.highcharts-dashboards-component-title {
    font-size: 1rem;
    font-weight: 100;
    margin-top: 25px;
    margin-bottom: 4px;
    color: var(--highcharts-neutral-color-60);
}

.highcharts-dashboards-component-subtitle {
    font-weight: 100;
    color: var(--highcharts-neutral-color-60);
}

.highcharts-dashboards-component-kpi-value {
    font-size: 2.5rem;
}

#rev-chart-kpi .highcharts-dashboards-component-kpi-value,
#cost-chart-kpi .highcharts-dashboards-component-kpi-value,
#res-chart-kpi .highcharts-dashboards-component-kpi-value {
    display: none;
}

/* Highcharts */

:root,
.highcharts-light {
    --highcharts-color-0: #4689eb;
    --highcharts-color-1: #afafaf;
}

@media (prefers-color-scheme: dark) {
    :root {
        --highcharts-color-1: #616161;
    }
}

.highcharts-gauge-chart .highcharts-grid-line {
    stroke-width: 0;
}

.highcharts-gauge-chart .highcharts-title {
    font-size: 0.8rem;
}

.highcharts-data-label-box {
    display: none;
}

.highcharts-gauge-series .highcharts-pivot,
.highcharts-gauge-series .highcharts-dial {
    fill: var(--highcharts-neutral-color-60);
    stroke: var(--highcharts-neutral-color-60);
}

.highcharts-plot-band {
    fill-opacity: 1;
}

.highcharts-plot-band.null-band {
    fill: var(--highcharts-neutral-color-20);
}

.highcharts-plot-band.warn-band {
    fill: #ffa92e;
}

.highcharts-plot-band.opt-band {
    fill: #a2efbb;
}

.highcharts-plot-band.high-band {
    fill: #8383e5;
}

.highcharts-plot-line-label {
    fill: var(--highcharts-neutral-color-60);
}

.highcharts-column-chart .highcharts-point {
    cursor: pointer;
}

.highcharts-stock-chart .highcharts-color-1,
.highcharts-stock-chart .highcharts-color-2 {
    fill: #debd5b;
    stroke: #debd5b;
    stroke-dasharray: 1px...

JavaScript

// eslint-disable-next-line no-underscore-dangle
const U = Highcharts._modules['Core/Utilities.js'];

const currentMonth = Date.UTC(2023, 9);
const revTarget = 105;
const costTarget = 89;

const currentYear = new Date(currentMonth).getFullYear();

const commonGaugeOptions = {
    chart: {
        height: 150,
        type: 'gauge',
        className: 'highcharts-gauge-chart'
    },
    subtitle: {
        floating: true,
        verticalAlign: 'bottom',
        y: 20
    },
    pane: {
        startAngle: -90,
        endAngle: 89.9,
        background: null,
        center: ['50%', '64%'],
        size: '110%'
    },
    yAxis: {
        visible: true,
        min: 0,
        minorTickInterval: null,
        labels: {
            distance: 12,
            allowOverlap: true
        }
    },
    tooltip: {
        enabled: false
    },
    plotOptions: {
        series: {
            dial: {
                baseWidth: 12,
                baseLength: 0,
                rearLength: 0
            },
            pivot: {
                radius: 5
            },
            dataLabels: {
                useHTML: true,
                format: '${y}M'
            }
        }
    }
};

const commonColumnOptions = {
    accessibility: {
        point: {
            valuePrefix: '$'
        }
    },
    chart: {
        type: 'column',
        className: 'highcharts-column-chart'
    },
    credits: {
        enabled: false
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(currentYear),
        max: Date.UTC(currentYear, 11)
    },
    yAxis: {
        tickInterval: 2e6
    },
    series: [{
        name: 'Budget',
        colorIndex: 1
    }],
    tooltip: {
        formatter: function () {
            const { x, y, colorIndex: color, series } = this;
            const date = Highcharts.dateFormat('%B %Y', x);

            return `<span style="font-size: 10px">${date}</span><br>
                <span...