how to make custom table in react Js

Deric 0
Viewed 55

im currently workinvg on react project and need to build a custom chart like below.

enter image description here

X and Y axis are weeks. In red color values every week lost machines and green indicates out of lost machines how many of them are actually recovered.

Net Lost is [Lost] - [Recovered]

Net Recovered is [Summation of Recovered for a particular week]

Ex: For Week 1 : 5 machines lost and 3 of them are recovered in week 3 and another one is recovered in week 6. so net lost is 5-1, and net recovered is 3+1.

But my problem is how can I build a custom visual like this using React Js. I'm very new to react and only worked with proper charts like bar/pie/line charts. Can someone suggest to me the path that I go need to follow? or some ideas or feedback

reactjs
1 Answers

In Highcharts you have some ways to create the table, one is defined table as HTML, https://www.highcharts.com/demo/column-parsed.

<table id="datatable">
    <thead>
        <tr>
            <th></th>
            <th>Boys</th>
            <th>Girls</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>2016</th>
            <td>30 386</td>
            <td>28 504</td>
        </tr>
        <tr>
            <th>2017</th>
            <td>29 173</td>
            <td>27 460</td>
        </tr>
        <tr>
            <th>2018</th>
            <td>28 430</td>
            <td>26 690</td>
        </tr>
        <tr>
            <th>2019</th>
            <td>28 042</td>
            <td>26 453</td>
        </tr>
        <tr>
            <th>2020</th>
            <td>27 063</td>
            <td>25 916</td>
        </tr>
        <tr>
            <th>2021</th>
            <td>28 684</td>
            <td>27 376</td>
        </tr>
    </tbody>
</table>

It's possible to create table using exporting module, example.

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

Both tables can be implemented in React, if you want to make any custom changes to the table then you may need to add a wrap from the source code.

Official GitHub page with our React wrapper to build Higcharts with this library. https://github.com/highcharts/highcharts-react

----- EDIT

Possible way to fill cell background in color is to use the CSS selector :nth-child().

.highcharts-data-table tr:nth-child(6) td:nth-child(2) {
    background: #00ff00;
}
Sebastian Hajdus0
Related