JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://elycharts.com/sites/elycharts.com/repo/dist/elycharts.min.js"></script>
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<!-- the div where we are going to plot -->
<div id="chart" style="width: 100%; height: 300px"></div>
<script language="javascript">
    function newData() {
        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));
            thevalues2[i] = Math.floor(Math.random()* (i > 0 ? thevalues2[i-1]*1.5+100 : 1000));
        }
        $("#chart").chart({
            values: {
                serie1: thevalues,
                serie2: thevalues2
            }
        });
    }
</script>
<a href="javascript:newData()">update data</a>

CSS

/* style up the tooltips content */
.charlab { font-face: helvetica, arial; color: black; margin: 0; }
.date { font-face: helvetica, arial; font-weight: normal; color: #5AF; margin: 0; font-size: 10px; line-height: 12px; }
.label { text-align: center;  }

JavaScript

// this is a reausable template definition. scroll down for the real chart call.
$.elycharts.templates['raphael_analytics'] = {
    type: "line",
    margins: [10, 15, 25, 15],
    defaultSeries: {
        plotProps: {
            "stroke-width": 4
        },
        dot: true,
        rounded: false,
        dotProps: {
            stroke: "white",
            size: 5,
            "stroke-width": 1
        },
        startAnimation: { // use an animation to start plotting the chart
            active: true,
            type: "avg",
            // start from the average line.
            speed: 1000,
            // animate in 1 second.
            easing: ">"
        },
        stepAnimation : { // defines an animation for data updates
            speed : 2000,
            delay : 0,
            easing : '<>'
        },
        highlight: {
            scaleSpeed: 0,
            // do not animate the dot scaling. instant grow.
            scaleEasing: '',
            scale: 1.2 // enlarge the dot on hover
        },
        tooltip: {
            height: 35,
            width: 80,
            padding: [3, 3],
            offset: [-15, -10],
            frameProps: {
                opacity: 0.75,
                /* fill: "white", */
                stroke: "#CCC"

            }
        }
    },
    series: {
        serie1: {
            fill: true,
            fillProps: { opacity: .1 },
            color: "#26B",
            // make sure our serie 1 uses black dots and grey tooltip borders, otherwise they are inherithed by the serie color.
        },
        serie2: {
            axis: 'r',
            color: "#F80",
            plotProps: {
                "stroke-width": 2
            },
            dotProps: {
                stroke: "white",
                size: 3,
                "stroke-width": 1
            }
        }
        
    },
    defaultAxis: {
        labels: true,
        labelsProps: {
            fill: "#888",
            "font-size":...