JSFiddle - React, Tailwind, and code Playground

by Sergio Sánchez

HTML

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


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<table id="datatable" style="display:none;">
    <thead>
        <tr>
            <th></th>
            <th>Investment</th>
            <th>Remaining Investment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td>1000</td>
            <td>4000</td>
        </tr>
       
    </tbody>
</table>

JavaScript

$(function () {
    $('#container').highcharts({
        data: {
            table: 'datatable'
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        }, xAxis: {
            categories: [
                '',
               
            ]
        },
        tooltip: {
           headerFormat: '<table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        }
    });
});