JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<script src="https://code.highcharts.com/highcharts.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/themes/adaptive.js"></script>

<div id="container" class="shell">
  <div class="row">
    <section class="cell" id="kpi-grid-cell"></section>
    <section class="cell" id="sales-trend-cell"></section>
    
  </div>
  <div class="row">
    <section class="cell" id="standalone-mix-cell"></section>
    <section class="cell" id="orders-quality-cell"></section>
  </div>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

#container.shell {
  display: grid;
  gap: 12px;
  margin: 12px;
}

.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.cell {
  min-height: 320px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 8px;
  background: #ffffff;
}

#kpi-grid-cell {
  max-height: 470px;
  border: none;
  padding: 0;
}

@media (max-width: 900px) {
  .row {
    grid-template-columns: 1fr;
  }
}
.highcharts-light .custom-theme,
.custom-theme {
  --hcg-border-color: #d9d9d9;
  --hcg-sync-opacity: 15%;
  --hcg-row-sync-background: #f28f43;
  --hcg-column-sync-background: #f28f43;
}

JavaScript

Highcharts.setOptions({
  credits: {
    enabled: false,
  },
  title: {
    text: '',
  },
  yAxis: {
    title: {
      text: '',
    },
  },
});

const retailKPIData = [
  ['Month', 'Revenue', 'Orders', 'Avg Basket', 'Returns %'],
  ['Jan', 1200000, 15000, 80.0, 3.4],
  ['Feb', 1150000, 14200, 81.0, 3.1],
  ['Mar', 1320000, 16250, 81.2, 2.9],
  ['Apr', 1400000, 17000, 82.4, 3.0],
  ['May', 1470000, 17700, 83.1, 2.8],
  ['Jun', 1540000, 18100, 85.1, 2.6],
  ['Jul', 1620000, 18800, 86.2, 2.7],
  ['Aug', 1580000, 18400, 85.9, 2.9],
  ['Sep', 1490000, 17600, 84.7, 3.2],
  ['Oct', 1680000, 19450, 86.4, 2.8],
  ['Nov', 1930000, 22700, 85.0, 2.5],
  ['Dec', 2420000, 28100, 86.1, 2.2],
];

Dashboards.board('container', {
  dataPool: {
    connectors: [
      {
        id: 'retail-kpi',
        type: 'JSON',
        data: retailKPIData,
      },
    ],
  },
  components: [
    {
      renderTo: 'kpi-grid-cell',
      type: 'Grid',
      connector: {
        id: 'retail-kpi',
      },
      sync: {
        highlight: {
          enabled: true,
          group: 'retail-sync',
          autoScroll: true,
        },
      },
      gridOptions: {
        rendering: {
          theme: 'hcg-theme-default custom-theme',
        },
        credits: {
          enabled: false,
        },
        columns: [
          {
            id: 'Revenue',
            cells: {
              format: '${value:,f}',
            },
          },
          {
            id: 'Avg Basket',
            cells: {
              format: '${value:.2f}',
            },
          },
          {
            id: 'Returns %',
            cells: {
              format: '{value:.1f}%',
            },
          },
        ],
      },
    },
    {
      renderTo: 'sales-trend-cell',
      type: 'Highcharts',
      title: {
        text: 'Revenue Trend',
      },
      connector: {
        id: 'retail-kpi',
       ...