JSFiddle - React, Tailwind, and code Playground

by Rui Hu

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        
    </head>
    <body>
        <script src="http://d3js.org/d3.v3.min.js"></script>
      
        <div id="tooltip" class="hidden">
            <p><span id="value">100</span></p>
        </div>

        <script>
        var margins = {
                top: 12,
                left: 48,
                right: 24,
                bottom: 24
            },
            legendPanel = {
                width: 240
            },
            width = window.innerWidth - margins.left - margins.right - legendPanel.width,
            height = 800 - margins.top - margins.bottom,
            dataset = [
                {
                    data: [
                        { month: 'Oct', count: 345 }
                    ],
                    name: 'Series #1'
                },
                {
                    data: [
                        { month: 'Oct', count: 573 }
                    ],
                    name: 'Series #2'
                },
				{
                    data: [
                        { month: 'Oct', count: 200 }
                    ],
                    name: 'Series #3'
                },
				{
                    data: [
                        { month: 'Oct', count: 250 }
                    ],
                    name: 'Series #4'
                }

            ],
            series = dataset.map(function(d) { return d.name; }),
            dataset = dataset.map(function(d) {
                return d.data.map(function(o, i) {
                    // Structure it so that your numeric
                    // axis (the stacked amount) is y
                    return {
                        y: o.count,
                        x: o.month
                    };
                });
            }),
            stack = d3.layout.stack();
        stack(dataset);

        var dataset = dataset.map(function(group) {
            return group.map(function(d) {
                //...

CSS

.bar {
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
        
        #tooltip {
            position: absolute;
            text-align: center;
            width: 40px;
            height: auto;
            padding: 10px;
            background-color: white;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        #tooltip.hidden {
            display: none;
        }

        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }
		.axis{
			
		}