JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://elycharts.com/sites/elycharts.com/repo/lib/raphael.js"></script>
<script src="http://elycharts.com/sites/elycharts.com/repo/dist/elycharts.min.js"></script>
<!-- the div where we are going to plot -->
<div id="chart" style="width: 100%; height: 200px"></div>

CSS

/* style up the tooltips content */
.charlab { font-face: helvetica, arial; color: black; margin: 0; }
.date { font-size: 10px; font-weight: normal }
.visits { color: #5Af; font-weight: normal }
.hits { color: #F80; font-weight: normal }
.label { font-size: 12px; line-height: 14px; margin-left: 2px; font-weight: bold }

JavaScript

$(function() {
    // let's loop to build tooltips and x labels.
    var thelabels = new Array(30);
    for (var i = 0; i < thelabels.length; i++) {
        thelabels[i] = (i % 6 === 0) ? (i + 1) + " september" : "";
    }

    // build the chart using the "google analytics" template.
    $("#chart").chart({
        template: "google_analytics",
        labels: thelabels,
        values: values()
    });

    // start a loop that sets new data in the chart every 5 seconds.
    loop();
});

/* Here is a simple update function generating new random data for the plot */

function values() {
    var thevalues = new Array(31);
    var thevalues2 = new Array(31);
    for (var i = 0; i < thevalues.length; i++) {
        thevalues[i] = Math.floor(Math.random() * (i > 0 ? thevalues[i - 1] * 1.5 + 10 : 100) + 10);
        thevalues2[i] = Math.floor(Math.random() * (i > 0 ? thevalues2[i - 1] * 1.5 + 100 : 1000) + 100);
    } /* Note how we simply call again .chart with only the updated values */                                
    return { serie1: thevalues, serie2: thevalues2 };
}

function loop() {
    $("#chart").chart({
        values: values()
    });
    setTimeout('loop()', 5000);
}

// this is a reausable template definition.
$.elycharts.templates['google_analytics'] = {
    type: "line",
    margins: [10, 15, 25, 15],
    /* Define how to draw tooltips starting from series data */
    /* this can be an array with the tooltips content or a function to generate them on the fly */
    tooltips: function(env, serie, index, value, label) {
        return "<div class='label'><p class='date'>September " + index + "</p><p><span class='visits'>Visits:</span> " + env.opt.values['serie1'][index] + "</p><p><span class='hits'>Hits:</span> " + env.opt.values['serie2'][index] + "</p></div>";
    },
    defaultSeries: {
        plotProps: {
            "stroke-width": 4
        },
        dot: true,
        rounded: false,
        dotProps: {
            stroke: "white",
         ...