JSFiddle - React, Tailwind, and code Playground

by Sanchit Jain

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.stocinn.com/stoccharts/js/stocChart.js"></script>
<div id='scatterPlotChart'></div>

CSS

#scatterPlotChart {
    width:800px;
    height:400px;
}

JavaScript

var scatterPlotData = {

    xAxisTickArray: ["Jan'14", "Feb'14", "Mar'14", "Apr'14", "May'14", "Jun'14", "Jul'14", "Aug'14", "Sept'14", "Oct'14", "Nov'14", "Dec'14", "Jan'15", "Feb'15", "Mar'15", "Apr'15", "May'15", "Jun'15"],
    xIndicationLabel: "Time",
    yIndicationLabel: "Population",
    padding: 30,
    yAixsData: [{
        "name": "Women",
            "color": "pink",
            "shape": "circle",
            "data": [20, 560, 90, 250, 300, 100, 130, 330, 250, 500, 15, 30, 200, 56, 290, 150, 320, 120, 230, 400, 260, 400, 159, 230, 200, 260, 190, 350, 300, 290, 230, 430, 150, 300, 150]
    },

    {
        "name": "Child",
            "color": "green",
            "shape": "triangle",
            "data": [200, 45, 25, 330, 89, 15, 220, 450, 125, 380, 389, 315, 190, 450, 250, 430, 589, 150]
    }, {
        "name": "Men",
            "color": "blue",
            "shape": "square",
            "data": [20, 90, 50, 33, 95, 150, 200, 190, 500, 330, 450, 250, 200, 340, 312, 290, 140, 150]
    }]
};

var cfgScatterPlot = {

    padding: 30,
    toolTipLabel: 'Population'
}

var xAxisTickArray = ["Jan'14", "Feb'14", "Mar'14", "Apr'14", "May'14", "Jun'14", "Jul'14", "Aug'14", "Sept'14", "Oct'14", "Nov'14", "Dec'14", "Jan'15", "Feb'15", "Mar'15", "Apr'15", "May'15", "Jun'15"];
var textStyleConfg = {
    "font-family": "Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif",
    "font-size": "12",
    "background": "none",
    "font-color": "black",
    "font-weight": 300
};

$(document).ready(function () {

    var stocChart2 = $("#scatterPlotChart").stocCharts(textStyleConfg);
    stocChart2.drawScatterPlotChart('#scatterPlotChart', scatterPlotData);

});