JSFiddle - React, Tailwind, and code Playground

by christauff

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container13" class="highcharts"></div>
    <div align="center">
      <table cellspacing="0" cellpadding="0" id="datatable2" width="50%">
        <thead>
          <tr>
            <th height="19" width="64"><strong>Grantee</strong></th>
            <th width="64"><strong>Heating</strong></th>
            <th width="64"><strong>Cooling</strong></th>
            <th width="64"><strong>Winter crisis</strong></th>
            <th width="64"><strong>Summer crisis</strong></th>
            <th width="64"><strong>Year round   crisis</strong></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td height="19" width="64">Nation</td>
            <td align="right">555</td>
            <td align="right">107</td>
            <td align="right">389</td>
            <td align="right">36</td>
            <td align="right">148</td>
          </tr>
          <tr>
            <td height="19" width="64">Midwest</td>
            <td align="right">619</td>
            <td align="right">44</td>
            <td align="right">391</td>
            <td align="right">32</td>
            <td align="right">99</td>
          </tr>
          <tr>
            <td height="19" width="64">Illinois</td>
            <td width="64" align="right">577</td>
            <td width="64" align="right">150</td>
            <td width="64" align="right">174</td>
            <td width="64" align="right">0</td>
            <td width="64" align="right">0</td>
          </tr>
        </tbody>
      </table>

JavaScript

$(function () {
    $('#container13').highcharts({
        data: {
            table: document.getElementById('datatable2')
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Units'
            }
        },
        /*xAxis: {
			categories: []
			},*/
        legend: {
			align: 'right',
			//verticalAlign: 'bottom',
			layout: 'vertical',
			x: 0,
			//y: -300
			},

    });
});