JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Rickshaw</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://mbostock.github.com/d3/d3.js"></script>
        <script src="https://raw.github.com/shutterstock/rickshaw/master/rickshaw.min.js"></script>
        
        
    </head>
    <body>
        
<style>


#yAxis {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
}

/*
#xAxis {
        position: absolute;
        top: 600;
        bottom: 0;
       
}
*/

#chart_container {
        position: relative;
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
}
#chart {
        display: inline-block;
        margin-left: 40px;
}

#legend {
        display: inline-block;
        vertical-align: top;
        margin: 0 0 0 10px;
}

#slider {
     
     margin-left: 40px;
}

#smoother {
     
     margin-left: 40px;
}

</style>

<div id="chart_container">
    <div id="chartTitle"></div>
    
    <div id="yAxis"></div>
    <!--<div id="xAxis"></div> -->
    
    <div id="chart"></div>
    <div id="timeline"></div>
    <div id="slider"></div>
    
    <h4>Smoothing</h4>
    <div id="smoother" title="Smoothing"></div>
    
</div> <!-- close chart container-->


<div id="legend"></div>

    






<br>
    





<!-- control panel on the right -->
<div style="position:absolute; left:500px; top:0px">

<!--
<table id="axisOptions"></table>
-->








<form id="side_panel">
        <section>
            <div id="renderer_form" class="toggler">
                <input type="radio" name="renderer" id="area" value="area" checked>
                <label for="area">area</label>
                <input type="radio" name="renderer" id="bar" value="bar">
                <label for="bar">bar</label>
                <input type="radio" name="renderer" id="line" value="line">
                <label for="line">line</label>
                <input...

CSS

.rickshaw_graph .detail{pointer-events:none;position:absolute;top:0;z-index:2;background:rgba(0,0,0,.1);bottom:0;width:1px;transition:opacity .25s linear;-moz-transition:opacity .25s linear;-o-transition:opacity .25s linear;-webkit-transition:opacity .25s linear}.rickshaw_graph .detail.inactive{opacity:0}.rickshaw_graph .detail .item.active{opacity:1}.rickshaw_graph .detail .x_label{font-family:Arial,sans-serif;border-radius:3px;padding:6px;opacity:.5;border:1px solid #e0e0e0;font-size:12px;position:absolute;background:#fff;white-space:nowrap}.rickshaw_graph .detail .item{position:absolute;z-index:2;border-radius:3px;padding:.25em;font-size:12px;font-family:Arial,sans-serif;opacity:0;background:rgba(0,0,0,.4);color:#fff;border:1px solid rgba(0,0,0,.4);margin-left:1em;margin-top:-1em;white-space:nowrap}.rickshaw_graph .detail .item.active{opacity:1;background:rgba(0,0,0,.8)}.rickshaw_graph .detail .item:before{content:"\25c2";position:absolute;left:-.5em;color:rgba(0,0,0,.7);width:0}.rickshaw_graph .detail .dot{width:4px;height:4px;margin-left:-4px;margin-top:-3px;border-radius:5px;position:absolute;box-shadow:0 0 2px rgba(0,0,0,.6);background:#fff;border-width:2px;border-style:solid;display:none;background-clip:padding-box}.rickshaw_graph .detail .dot.active{display:block}.rickshaw_graph{position:relative}.rickshaw_graph svg{display:block;overflow:hidden}.rickshaw_graph .x_tick{position:absolute;top:0;bottom:0;width:0;border-left:1px dotted rgba(0,0,0,.2);pointer-events:none}.rickshaw_graph .x_tick .title{position:absolute;font-size:12px;font-family:Arial,sans-serif;opacity:.5;white-space:nowrap;margin-left:3px;bottom:1px}.rickshaw_annotation_timeline{height:1px;border-top:1px solid #e0e0e0;margin-top:10px;position:relative}.rickshaw_annotation_timeline .annotation{position:absolute;height:6px;width:6px;margin-left:-2px;top:-3px;border-radius:5px;background-color:rgba(0,0,0,.25)}.rickshaw_graph...

JavaScript

var seriesData = [];

seriesData[0] = [ { x: 0, y: 70 }, { x: 1, y: 49 }, { x: 2, y: 70 }];
seriesData[1] = [ { x: 0, y: 50 }, { x: 1, y: 60 }, { x: 2, y: 90 }];
seriesData[2] = [ { x: 0, y: -70 }, { x: 1, y: 20 }, { x: 2, y: 10 }];
seriesData[3] = [ { x: 0, y: 50 }, { x: 1, y: 50 }, { x: 2, y: -45 }];
//seriesData[2] = [[{color: "#6060c0"}],[ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 70 }],[{name: 'Tokyo'}]]

//seriesData[0] = [[{color: "#c05020"}],[ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 70 }],[name: 'New York']]
//seriesData[1] = [[{color: "#30c020"}],[ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 70 }],[{name: 'London'}]]
//seriesData[2] = [[{color: "#6060c0"}],[ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 70 }],[{name: 'Tokyo'}]]

var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );


// instantiate our graph!

var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 400,
    height: 300,
    renderer: 'bar', //TODO link to selected chart
    stroke: true,
    min: 'auto',
    series: [
    {
        color: palette.color(),
        data: seriesData[0],
        name: 'London'
    },
    {
        color: palette.color(),
        data: seriesData[1],
        name: 'Milan'
    },
    {
        color: palette.color(),
        data: seriesData[2],
        name: 'Madrid'
    },
    {
        color: palette.color(),
        data: seriesData[3],
        name: 'Paris'
    }
    
    ]
} );


graph.renderer.unstack = true;

graph.render();


var slider = new Rickshaw.Graph.RangeSlider( {
    graph: graph,
    element: $('#slider')
} );

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph,
    formatter: function(series, x, y) {
        var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
        var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
        var content = swatch + series.name + ": " + parseInt(y) + '<br>'...