JSFiddle - React, Tailwind, and code Playground

by Fernando ATIENZA

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/jquery-widgets-demo/demos/sampledata/nasdaq_vs_sp500.txt"></script>
<div id='chartContainer' style="width:850px; height:500px"></div>

JavaScript

var source = [{
    'Date': "1/1/2011",
        'S&P 500': 0,
        'NASDAQ': 2691.52
}, {
    'Date': "2/1/2011",
        'S&P 500': 1270.2,
        'NASDAQ': 2681.25
}, {
    'Date': "3/1/2011",
        'S&P 500': 1273.2,
        'NASDAQ': 2688.25
}];
var dataAdapter = new $.jqx.dataAdapter(source, {
    async: false,
    autoBind: true,
    loadError: function (xhr, status, error) {
        alert('Error loading "' + source.url + '" : ' + error);
    }
});
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// prepare jqxChart settings
var settings = {
    title: "U.S. Stock Market Index Performance",
    description: "NASDAQ Composite compared to S&P 500",
    enableAnimations: true,
    showLegend: true,
    padding: {
        left: 10,
        top: 5,
        right: 10,
        bottom: 5
    },
    titlePadding: {
        left: 90,
        top: 0,
        right: 0,
        bottom: 10
    },
    source: dataAdapter,
    xAxis: {
        dataField: 'Date',
        formatFunction: function (value) {
            return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
        },
        type: 'date',
        baseUnit: 'month',
        showTickMarks: true,
        tickMarksInterval: 1,
        tickMarksColor: '#888888',
        unitInterval: 1,
        showGridLines: true,
        gridLinesInterval: 3,
        gridLinesColor: '#888888',
        valuesOnTicks: true,
        minValue: '01-01-2011',
        maxValue: '01-01-2012',
        textRotationAngle: -45,
        textRotationPoint: 'topright',
        textOffset: {
            x: 0,
            y: -25
        }

    },
    colorScheme: 'scheme04',
    seriesGroups: [{
        type: 'line',
        valueAxis: {
            unitInterval: 500,
            minValue: 0,
            maxValue: 3000,
            displayValueAxis: true,
            description: 'Daily Closing Price',
            axisSize: 'auto',
            tickMarksColor:...