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>

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: 10px 0 10px 20px;
    margin: 0;
    background-color: #3d3d3d;
    color: #fff;
}

JavaScript

Highcharts.setOptions({
  chart: {
    styledMode: true,
    type: "column",
    spacing: [30, 30, 30, 20],
  },
})
Dashboards.board(
  "container",
  {
    dataPool: {
      // First set up 2 data connectors
      connectors: [
        {
          id: "Disgusting food",
          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],
            ],
          },
        },
         {
          id: "Nice food",
          type: "JSON",
          options: {
            firstRowAsNames: false,
            columnNames: ["Food", "Vitamin A", "Iron"],
            data: [
              ["Cake", 120, 0.5],
              ["Lollipops", 10, 0.8],
              ["Bacon", 457, 0.9],
              ["Coca Cola", 0, 2],
            ],
          },
        },
      ],
    },
    editMode: {
      enabled: true,
      contextMenu: {
        enabled: true,
      },
    },
    gui: {
      layouts: [
        {
          rows: [
            {
              cells: [
                {
                  id: "chart_1",
                },
                {
                  id: "chart_2",
                },
              ],
            },
            {
              cells: [
                {
                  id: "grid",
                },
              ],
            },
          ],
        },
      ],
    },
    components: [
      {
        connector: {
        	// Pick connector for first chart, and choose what columns to use
          id: "Disgusting food",
          columnAssignment: [
            {
              seriesId: "Vitamin A",
              data: ["Food", "Vitamin A"],
            },
          ],
        },
        renderTo: "chart_1",
        type: "Highcharts",
        chartOptions: {
    ...