JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div style="height: 600px; width: 682px;">
<div id="host" style="margin: 0 auto; width:850px; height:400px;">
<div id="jqxChart" style="width:850px; height:400px; position: relative; left: 0px; top: 0px;">
</div>
</div>
</div>

JavaScript

// prepare chart data as an array
var sampleData = [
{ Day:'Monday', PeterKeith:1, Erica:15, GeorgeAttokannan: 25},
{ Day:'Tuesday', PeterKeith:25, Erica:25, GeorgeAttokannan: 30},
{ Day:'Wednesday', PeterKeith:30, Erica:20, GeorgeAttokannan: 25},
{ Day:'Thursday', PeterKeith:35, Erica:25, GeorgeAttokannan: 45},
{ Day:'Friday', PeterKeith:20, Erica:20, GeorgeAttokannan: 25},
{ Day:'Saturday', PeterKeith:30, Erica:20, GeorgeAttokannan: 30},
{ Day:'Sunday', PeterKeith:10, Erica:05, GeorgeAttokannan: 1}
];

var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = sampleData[itemIndex];
                var names = [];
                var temp = '';
                if(serie.displayText.length > 10)
                {
                 
                 temp = serie.displayText.replace(/([a-z])([A-Z])/g, '$1 $2').trim();
                 names = temp.split(' ');
                 return '<DIV style="text-align:center">'+ '<b>'+categoryValue+'<b></br>'+ names[0] +'</br>'+ names[1] +'</br>' + value +'</DIV>';
                }
                else {
                return '<DIV style="text-align:center">'+ '<b>'+categoryValue+'<b></br>' + serie.displayText +'</br>' + value +'</DIV>';
                }
                
            };
            
// prepare jqxChart settings
var settings = {
    title: "Fitness & exercise weekly scorecard",
    description: "Time spent in vigorous exercise",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    xAxis:
    {
    dataField: 'Day',
    showGridLines: true
    },
    colorScheme: 'scheme01',
    seriesGroups:
    [
    {
    type: 'column',
    toolTipFormatFunction: toolTipCustomFormatFn,
    columnsGapPercent: 50,
    seriesGapPercent: 0,
    valueAxis:
    {
    unitInterval: 10,
    minValue: 0,
    maxValue:...