Html Chart

Set the seriesGroups property of the jqxChart. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://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', Keith:1, Erica:15, George: 25},
{ Day:'Tuesday', Keith:25, Erica:25, George: 30},
{ Day:'Wednesday', Keith:30, Erica:20, George: 25},
{ Day:'Thursday', Keith:35, Erica:25, George: 45},
{ Day:'Friday', Keith:20, Erica:20, George: 25},
{ Day:'Saturday', Keith:30, Erica:20, George: 30},
{ Day:'Sunday', Keith:10, Erica:05, George: 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: 'Keith', displayText: 'Keith'},
    { dataField: 'Erica', displayText: 'Erica'},
    { dataField: 'George', displayText: 'George'}
    ]
    }
    ]
};
// setup the chart
 $('#jqxChart').jqxChart(settings);