JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxChart' style="width:100%; height:400px; position: relative; left: 0px; top: 0px;"></div>

JavaScript

var sampleData = [{
    timeid: '2015-01-01',
    a: 111,
    b: 2,
    c: 103,
    d: 4,
    e: 5,
    f: 26,
    g: 7,
    h: 28,
}, {
    timeid: '2015-02-01',
    a: 114,
    b: 5,
    c: 127,
    d: 2,
    e: 8,
    f: 22,
    g: 9,
    h: 35,
}, {
    timeid: '2015-03-01',
    a: 138,
    b: 2,
    c: 109,
    d: 4,
    e: 9,
    f: 51,
    g: 6,
    h: 33,
}, {
    timeid: '2015-04-01',
    a: 125,
    b: 2,
    c: 111,
    d: 7,
    e: 3,
    f: 22,
    g: 9,
    h: 34,
}];
// prepare jqxChart settings
var settings = {
    title: "Test",
    description: "Multiple chart types",
    showLegend: true,
    enableAnimations: true,
    padding: {
        left: 20,
        top: 5,
        right: 20,
        bottom: 5
    },
    titlePadding: {
        left: 90,
        top: 0,
        right: 0,
        bottom: 10
    },
    source: sampleData,
    categoryAxis: {
        dataField: 'Country',
        showGridLines: true,
        flip: false
    },
    colorScheme: 'scheme01',
    seriesGroups: [{
        valueAxis: {
            position: 'left',
            minValue: 0,
            maxValue: 140
        },

        type: 'line',
        series: [{
            dataField: 'a',
            displayText: 'Left SG1, Series A'
        }]
    }, {
        type: 'spline',
        valueAxis: {
            position: 'left',
            minValue: 0,
            maxValue: 140,
            visible: false
        },

        // type: 'area',
        series: [{
            dataField: 'c',
            displayText: 'Left SG1, series C'
        }]
    }, {
        type: 'line',
        valueAxis: {
            position: 'left'
        },
        series: [{
            dataField: 'b',
            displayText: 'Left SG2 , Series B'
        }]
    }, {
        type: 'line',
        valueAxis: {
            position: 'left'
        },
        series: [{
            dataField: 'd',
            displayText: 'Left SG3, Series D'
        }]
    }, {
        valueAxis: {
           ...