JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<h1 id="title">MicroElement amount in Foods</h1>
<div id="container"></div>
<p class="highcharts-description">
  The basic dashboard shows the amount of Vitamin A and Iron in foods.<br/>
  *Recommended Dietary Allowance (RDA).
</p>

CSS

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

/* Demo default style overrides */
:root {
  --text: #000;
  --background: #eeeeee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #fff;
    --background: #000000;
  }
}

body {
  background: var(--background);
  color: var(--text);
}

/* ******************** */
/* Light mode overrides */
/* ******************** */

@media (prefers-color-scheme: light) {
  :root {
    --highcharts-background-color: #ffffff;
    /* colors */
    --highcharts-neutral-color-100: #000000;
    --highcharts-neutral-color-80: #333333;
    --highcharts-neutral-color-60: #666666;
    --highcharts-neutral-color-20: #b1b1b1;
    --highcharts-neutral-color-5: #e4e4e4;
    --highcharts-neutral-color-3: #eeeeee;
    --highcharts-neutral-color-0: #ffffff;
  }
  /* some style overrides */
  .highcharts-dashboards-cell > .highcharts-dashboards-component {
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--highcharts-neutral-color-0);
    border-top: 1px solid var(--highcharts-neutral-color-0);
    box-shadow: 0px 13px 5px 0px rgba(0, 0, 0, 0.01),
      0px 7px 4px 0px rgba(0, 0, 0, 0.02), 0px 3px 3px 0px rgba(0, 0, 0, 0.05),
      0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px -1px 1px 0px rgba(0, 0, 0, 0.05);
  }
  .highcharts-dashboards,
  .highcharts-dashboards-wrapper {
    background-color: var(--highcharts-neutral-color-3);
  }
}

/* ******************* */
/* Dark mode overrides */
/* ******************* */
@media (prefers-color-scheme: dark) {
  :root {
    --highcharts-background-color: #141414;
    /* colors */
    --highcharts-neutral-color-100: #ffffff;
    --highcharts-neutral-color-80: #d0d0d0;
    --highcharts-neutral-color-60: #a1a1a1;
    --highcharts-neutral-color-40: #727272;
 ...

JavaScript

Highcharts.setOptions({
    chart: {
        styledMode: true
    }
});
Dashboards.board('container', {
    dataPool: {
        connectors: [{
            id: 'micro-element',
            type: 'JSON',
            options: {
                firstRowAsNames: false,
                columnNames: ['Food', 'Vitamin A',  'Iron'],
                data: [
                    ['Beef Liver', 6421, 6.5],
                    ['Lamb Liver', 2122, 6.5],
                    ['Cod Liver Oil', 1350, 0.9],
                    ['Mackerel', 388, 1],
                    ['Tuna', 214, 0.6]
                ]
            }
        }]
    },
    editMode: {
        enabled: true,
        contextMenu: {
            enabled: true
        }
    },
    gui: {
        layouts: [{
            rows: [{
                cells: [{
                    id: 'kpi-wrapper',
                    layout: {
                        rows: [{
                            cells: [{
                                id: 'kpi-vitamin-a'
                            }, {
                                id: 'kpi-iron'
                            }]
                        }]
                    }
                }, {
                    id: 'dashboard-col-0'
                }, {
                    id: 'dashboard-col-1'
                }]
            }, {
                cells: [{
                    id: 'dashboard-col-2'
                }]
            }]
        }]
    },
    components: [{
        type: 'KPI',
        renderTo: 'kpi-vitamin-a',
        value: 900,
        valueFormat: '{value}',
        title: 'Vitamin A',
        subtitle: 'daily recommended dose'
    }, {
        type: 'KPI',
        renderTo: 'kpi-iron',
        value: 8,
        title: 'Iron',
        valueFormat: '{value}',
        subtitle: 'daily recommended dose'
    }, {
        sync: {
            visibility: true,
            highlight: true,
            extremes:...