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: 300px"></div>

CSS

/* style up the tooltips content */
.charlab { font-face: helvetica, arial; color: white; 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

$(function() {
    // the chart values
    var thevalues = [8, 25, 27, 25, 54, 59, 79, 47, 27, 44, 44, 51, 56, 83, 12, 91, 52, 12, 40, 8, 60, 29, 7, 33, 56, 25, 1, 78, 70, 68, 2];
    // let's loop to build tooltips and x labels.
    var thetooltips = new Array(thevalues.length);
    var thelabels = new Array(thevalues.length);
    for (var i = 0; i < thevalues.length; i++) {
        thetooltips[i] = "<div class='label'><p class='charlab'>" + thevalues[i] + " hits</p><p class='date'>" + (i + 1) + " september</p></div>";
        thelabels[i] = i + 1;
    }

    // build the chart with 1 serie using the above template.
    $("#chart").chart({
        template: "raphael_analytics",
        tooltips: thetooltips,
        values: {
            serie1: thevalues,
        },
        labels: thelabels,
    });
});


// this is a reausable template definition. scroll down for the real chart call.
$.elycharts.templates['raphael_analytics'] = {
    type: "line",
    style: {
        "background-color": "black"
    },
    margins: [10, 15, 25, 15],
    defaultSeries: {
        rounded: 0.6,
        fill: true,
        plotProps: {
            "stroke-width": 4
        },
        dot: true,
        dotProps: {
            stroke: "#5AF",
            "stroke-width": 2,
            fill: "black"
        },
        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: "bounce"
        },
        highlight: {
            scaleSpeed: 0,
            // do not animate the dot scaling. instant grow.
            scaleEasing: '',
            scale: 1.5 // enlarge the dot on hover
        },
        tooltip: {
            height: 35,
            width: 80,
            padding: [3, 3],
            offset: [-15, -10],
            frameProps: {
                opacity: 0.75,
                fill:...