JSFiddle - React, Tailwind, and code Playground

by sfjeld

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css"/>
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
		<script src="https://code.highcharts.com/maps/highmaps.js"></script>
		<script src="https://code.highcharts.com/modules/data.js"></script>
		
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-all-territories.js"></script>

<div id="container"></div>
		
<table id="pvsoiling-table" class="table table-striped notransform dataTable no-footer">
  <thead>
  <tr>
    <th>id</th>
    <th>lat</th>
    <th>lon</th>
	<th>Site</th>
    <th>Sratio</th>
    <th>Annual Sratio</th>
    <th>Monthly</th>
    <th>Measurement Type</th>
    <th>Tilt</th>
    <th>County</th>
    <th>Median Srate</th>
    <th>Mounting</th>
    <th>Months in Dataset</th>
  </tr>
    </thead>
    <tbody>
  <tr>
    <td align="right">0</td>
    <td align="right">33.3</td>
    <td align="right">-111.67</td>
	<td>NREL white paper 19</td>
    <td align="right">0.99</td>
    <td>[['[', 2015, 0.994, ']'],<br/>['[', 2016, 0.995, ']']]</td>
    <td>
      <p>January: [1, ' valid soiling intervals', ' low rate=', -0.105, ' median rate=',   -0.095, ' high rate=', -0.084]</p>
      <p>February: [1, ' valid soiling intervals', ' low rate=', -0.093, ' median rate=',   -0.083, ' high rate=', -0.073]</p>
      <p>March: [2, ' valid soiling intervals', ' low rate=', -0.095, ' median rate=',   -0.082, ' high rate=', -0.069]</p>
      <p>April: [2, ' valid soiling intervals', ' low rate=', -0.065, ' median rate=',   -0.051, ' high rate=', -0.037]</p>
      <p>May: [2, ' valid soiling intervals', ' low rate=', -0.073, ' median rate=',   -0.058, ' high rate=', -0.045]</p>
      <p>June: [1, ' valid soiling...

JavaScript

$(document).ready(function() {
  $('#pvsoiling-table').DataTable();
 
 } );
 // Prepare demo data
  // Data is joined to map using value of 'hc-key' property by default.
  // See API docs for 'joinBy' for more info on linking data and map.

  // Create the chart
  Highcharts.mapChart('container', {
    chart: {
      map: 'countries/us/custom/us-all-territories'
    },

    title: {
      text: 'Highmaps basic demo'
    },

    subtitle: {
      text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/us/custom/us-all-territories.js">United States of America with Territories</a>'
    },
    tooltip: {
      pointFormat: 'Name: '
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'top'
      }
    },

    colorAxis: {
      min: 0
    },

    series: [{
        name: 'Basemap',
        nullColor: '#e0f9e3',
        dataLabels: {
          enabled: true,
          format: '{point.name}'
        }
      },
      {
        // Specify points using lat/lon
        type: 'mappoint',
        data: {
          table: 'pvsoiling-table',
          startRow: 1, //second row
          startColumn: 1,
          endColumn: 2
        },
        name: 'PV',
        marker: {
          fillColor: 'white',
          lineColor: 'black',
          lineWidth: 2,
          radius: 10
        },
        color: Highcharts.getOptions().colors[1]
      }
    ]
  });