JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/highcharts.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>

CSS

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

JavaScript

Dashboards.board('container', {
  components: [{
    type: 'Highcharts',
    cell: 'cell-1-1',
    connector: {
      id: 'economic-data'
    },
    columnAssignment: {
      Year: 'x',
      Inflation: 'y'
    },
    sync: {
    	highlight: true
    }
  }, {
    type: 'Highcharts',
    cell: 'cell-1-2',
    connector: {
      id: 'economic-data'
    },
    columnAssignment: {
      Year: 'x',
      'Consumer prices (annual %)': 'y'
    },
    sync: {
    	highlight: true
    }
  }, {
  	type: 'DataGrid',
    cell: 'cell-2-1',
    connector: {
      id: 'economic-data'
    },
    sync: {
    	highlight: true
    }
  }],
  gui: {
    layouts: [{
      rows: [{
        cells: [{
          id: 'cell-1-1'
        }, {
        	id: 'cell-1-2'
        }]
      }, {
      	cells: [{
        	id: 'cell-2-1'
        }]
      }]
    }]
  },
  dataPool: {
    connectors: [{
      type: 'JSON',
      id: 'economic-data',
      options: {
      	_dataURL: 'https://gist.githubusercontent.com/oysteinmoseng/4c3c278d33812bbd02baf80d364d2007/raw/b96042b75fb33b09a21ece5acea39538fbc1237d/economic-data.json',
        data: [
  ["Year", "Inflation", "Consumer prices (annual %)", "Claims on central government, etc. (% GDP)", "Net foreign assets (current LCU)", "Net domestic credit (current LCU)" ],
  [1960,1.45797598627786,23.7975335910179,17254799998.4452,328965000000  ],
  [1961,1.07072414764723,24.5126930587609,16139899998.3101,359059000000  ],
  [1962,1.19877334820185,23.3625846967443,14111399998.9356,393087000000  ],
  [1963,1.2396694214876,22.3958659567805,12817999998.965,431819000000  ],
  [1964,1.27891156462583,21.5925925925926,11075399999.2306,473935000000  ],
  [1965,1.58516926383669,20.206131504639,8839999999.396,522383000000  ],
  [1966,3.01507537688439,18.6557055214724,4691699999.6743,553832000000  ],
  [1967,2.77278562259307,18.8132760821632,4690199999.5798,608437000000  ],
  [1968,4.27179615288534,18.0721485411141,4887899998.7101,667910000000  ],
 ...