JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<script src="https://cdn.rawgit.com/liquidpele/nvd3/master/build/nv.d3.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/liquidpele/nvd3/master/build/nv.d3.css">
<svg id="chart1"></svg>

CSS

text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }

JavaScript

var data = [{"key":"Slice 1","values":[[1421665778460,0.5],[1421665779712,1],[1421665780270,0.5],[1421665780841,0.1],[1421665781535,1]]},{"key":"Slice 2","values":[[1421665778460,0.2],[1421665779712,0],[1421665780270,0.4],[1421665780841,0.5],[1421665781535,0]]},{"key":"Slice 3","values":[[1421665778460,0.3],[1421665779712,0],[1421665780270,0.1],[1421665780841,0.4],[1421665781535,0]]},{"key":"Slice 4","values":[[1421665778460,0],[1421665779712,0],[1421665780270,0],[1421665780841,0],[1421665781535,0]]}];

    var colors = d3.scale.category20();
    var keyColor = function(d, i) {return colors(d.key)};

    var chart;
    nv.addGraph(function() {
        chart = nv.models.stackedAreaChart()
            .useInteractiveGuideline(true)
            .x(function(d) { return d[0] })
            .y(function(d) { return d[1] })
            .controlLabels({stacked: "Stacked"})
            .color(keyColor)
            .duration(300);

        chart.xAxis.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
        chart.yAxis.tickFormat(d3.format(',.2f'));

        d3.select('#chart1')
            .datum(data)
          
            .call(chart);

        nv.utils.windowResize(chart.update);
        return chart;
    });