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>

<button id="update">
Data Update
</button>
<div id="container"></div>

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");

h1#title {
    padding-top: 10px;
    margin: 0;
    background-color: #3d3d3d;
    text-align: center;
    color: #fff;
}

#kpi-vitamin-a .highcharts-dashboards-component-title::before,
#kpi-iron .highcharts-dashboards-component-title::before {
    width: 14px;
    height: 14px;
    border-radius: 28px;
    display: inline-block;
    padding: 0;
    margin-right: 4px;
    background-color: var(--highcharts-color-0);
    content: " ";
}

#kpi-iron .highcharts-dashboards-component-title::before {
    background-color: var(--highcharts-color-2);
}

#kpi-vitamin-a .highcharts-dashboards-component-kpi-subtitle,
#kpi-iron .highcharts-dashboards-component-kpi-subtitle {
    margin-top: 10px;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60);
}

#kpi-vitamin-a .highcharts-dashboards-component-kpi-value,
#kpi-iron .highcharts-dashboards-component-kpi-value {
    font-size: 4em;
    line-height: 2.4rem;
    margin-top: 10px;
    color: var(--highcharts-color-0);
}

#kpi-iron .highcharts-dashboards-component-kpi-value {
    color: var(--highcharts-color-2);
}

#dashboard-col-1 .highcharts-color-0 {
    fill: var(--highcharts-color-2);
    stroke: var(--highcharts-color-2);
}

#kpi-vitamin-a .highcharts-dashboards-component-kpi-value::after,
#kpi-iron .highcharts-dashboards-component-kpi-value::after {
    content: "micrograms";
    display: block;
    font-size: 1rem;
}

.highcharts-plot-line {
    stroke-dasharray: 2px;
    stroke: var(--highcharts-color-3);
}

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

.highcharts-description {
    padding: 0 20px;
}

#kpi-vitamin-a,
#kpi-iron {
    flex: 1 1 100%;
    height: 205px;
}

/* LARGE */
@media (max-width: 1200px) {
    #dashboard-col-0,
    #dashboard-col-1 {
        flex: 1...

JavaScript

Highcharts.setOptions({
  chart: {
    styledMode: true,
  },
})

const generateData = (maxRows) => {
  const data = []

  for (let i = 0; i < maxRows; i++) {
    data.push([
      i,
      Math.round(Math.random(0, 1) * 100),
      Math.round(Math.random(0, 1) * 100),
    ])
  }

  return data
}

function setupBoard(maxRows) {
  const board = Dashboards.board(
    "container",
    {
      dataPool: {
        connectors: [
          {
            id: "micro-element",
            type: "JSON",
            options: {
              firstRowAsNames: false,
              enablePolling: true,
              columnNames: ["ID", "Vitamin A", "Iron"],
              data: generateData(maxRows),
            },
          },
        ],
      },
      editMode: {
        enabled: true,
        contextMenu: {
          enabled: true,
        },
      },
      gui: {
        layouts: [
          {
            rows: [
              {
                cells: [
                  {
                    id: "dashboard-col-0",
                  },
                  {
                    id: "dashboard-col-1",
                  },
                ],
              },
              {
                cells: [
                  {
                    id: "dashboard-col-2",
                  },
                ],
              },
            ],
          },
        ],
      },
      components: [
        {
                   sync: {
            visibility: true,
            highlight: true,
            extremes: true
        }, 
          connector: {
            id: "micro-element",
            columnAssignment: [
              {
                seriesId: "Vitamin A",
                data: ["ID", "Vitamin A"],
              },
            ],
          },
          renderTo: "dashboard-col-0",
          type: "Highcharts",
          chartOptions: {
            credits: {
              enabled: false,
            },
            legend: {
              enabled: true,
              verticalAlign:...