JSFiddle - React, Tailwind, and code Playground

by Greg

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 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',
                            },

                            type: 'line',                           
                            series: [
                                    { dataField: 'a', displayText: 'Left SG1, Series A' }
                                ]
                        },
                        {
                            type: 'spline',
                            valueAxis:
                            {                               
                                position: 'left',
                            },

                            type: 'area',
                            series: [
                                    { dataField: 'c', displayText: 'Left SG1, series C' }
     ...