JSFiddle - React, Tailwind, and code Playground

by Cayman

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Multi Series Span Chart (Vertical)</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="chart1" class="chart" style="width: 100%;"></div>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    </body>
    <script type="text/javascript" src="main.js"></script>
</html>

JavaScript

$( document ).ready(function() {
    render_chart();
});

function render_chart(){
    var stack = d3.layout.stack();
    var dataset = {
                "categories": ['2018-06-01T00:00:00.000+03:00',
								'2018-06-02T00:00:00.000+03:00',
								'2018-06-03T00:00:00.000+03:00',
								'2018-06-04T00:00:00.000+03:00',
								'2018-06-05T00:00:00.000+03:00',
								'2018-06-06T00:00:00.000+03:00',
								'2018-06-07T00:00:00.000+03:00',
								'2018-06-08T00:00:00.000+03:00',
								'2018-06-09T00:00:00.000+03:00',
								'2018-06-10T00:00:00.000+03:00',
								'2018-06-11T00:00:00.000+03:00',
								'2018-06-12T00:00:00.000+03:00'],
                "series": ["New York","Mumbai","Bengaluru"],
                "colors": ["#3498db","#e74c3c","#2ecc71"],
                "layers": [
                        [
                            {"y":1,"y0":20,"month":"2018-06-01T00:00:00.000+03:00"},
                            {"y":2,"y0":18,"month":"2018-06-02T00:00:00.000+03:00"},
                            {"y":5,"y0":18,"month":"2018-06-03T00:00:00.000+03:00"},
                            {"y":10,"y0":20,"month":"2018-06-04T00:00:00.000+03:00"},
                            {"y":14,"y0":23,"month":"2018-06-05T00:00:00.000+03:00"},
                            {"y":18,"y0":29,"month":"2018-06-06T00:00:00.000+03:00"},
                            {"y":20,"y0":31,"month":"2018-06-07T00:00:00.000+03:00"},
                            {"y":20,"y0":29,"month":"2018-06-08T00:00:00.000+03:00"},
                            {"y":16,"y0":24,"month":"2018-06-09T00:00:00.000+03:00"},
                            {"y":10,"y0":19,"month":"2018-06-10T00:00:00.000+03:00"},
                            {"y":5,"y0":23,"month":"2018-06-11T00:00:00.000+03:00"},
                            {"y":3,"y0":20,"month":"2018-06-12T00:00:00.000+03:00"}
                        ],
                        [
                            {"y":12,"y0":24,"month":"2018-06-01T00:00:00.000+03:00"},
    ...