JSFiddle - React, Tailwind, and code Playground

by Ranjith Kumar

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];
                return '<DIV style="text-align:center">'+ '<b>'+categoryValue+'<b></br>' + serie.displayText+':'+ 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: 100,
    displayValueAxis: true,
    description: 'Time in minutes',
    axisSize: 'auto',
    tickMarksColor: '#888888'
    },
    series: [
    { dataField: 'PeterKeith', displayText: 'PeterKeith'},
    { dataField: 'Erica', displayText: 'Erica'},
    { dataField: 'GeorgeAttokannan', displayText: 'GeorgeAttokannan'}
    ]
    }
    ]
};
// setup the chart
 $('#jqxChart').jqxChart(settings);