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

const chartOptions = {
};

Dashboards.board('container', {
  components: [{
    type: 'Highcharts',
    chartOptions,
    cell: 'cell-1',
    connector: {
      id: 'economic-data'
    },
    columnAssignment: {
      Year: 'x',
      Inflation: 'y'
    }
  }],
  gui: {
    layouts: [{
      rows: [{
        cells: [{
          id: 'cell-1'
        }]
      }]
    }]
  },
  dataPool: {
    connectors: [{
      type: 'JSON',
      id: 'economic-data',
      options: {
        dataUrl: 'https://gist.githubusercontent.com/oysteinmoseng/4c3c278d33812bbd02baf80d364d2007/raw/b96042b75fb33b09a21ece5acea39538fbc1237d/economic-data.json'
      }
    }]
  }
});