JSFiddle - React, Tailwind, and code Playground

by Sujit Kumar Singh

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://nvd3.org/assets/js/nv.d3.js"></script>
<link rel="stylesheet" href="https://nvd3.org/assets/css/nv.d3.css">
<div id="chart"></div>

JavaScript

var chartData = [{"key":"region_09364","values":[{"key":"Exception-0","value":5},{"key":"Exception-1","value":7},{"key":"Exception-2","value":3},{"key":"Exception-3","value":1},{"key":"Exception-4","value":1},{"key":"Exception-5","value":3},{"key":"Exception-6","value":3},{"key":"Exception-7","value":5},{"key":"Exception-8","value":2},{"key":"Exception-9","value":2},{"key":"null","value":6}]},{"key":"region_53989","values":[{"key":"Exception-0","value":5},{"key":"Exception-1","value":6},{"key":"Exception-2","value":4},{"key":"Exception-3","value":7},{"key":"Exception-4","value":3},{"key":"Exception-5","value":7},{"key":"Exception-6","value":4},{"key":"Exception-7","value":3},{"key":"Exception-8","value":4},{"key":"Exception-9","value":6},{"key":"null","value":4}]},{"key":"region_27345","values":[{"key":"Exception-0","value":0},{"key":"Exception-1","value":0},{"key":"Exception-2","value":2},{"key":"Exception-3","value":0},{"key":"Exception-4","value":0},{"key":"Exception-5","value":0},{"key":"Exception-6","value":0},{"key":"Exception-7","value":0},{"key":"Exception-8","value":1},{"key":"Exception-9","value":0},{"key":"null","value":4}]},{"key":"region_59753","values":[{"key":"Exception-0","value":0},{"key":"Exception-1","value":0},{"key":"Exception-2","value":1},{"key":"Exception-3","value":2},{"key":"Exception-4","value":1},{"key":"Exception-5","value":1},{"key":"Exception-6","value":2},{"key":"Exception-7","value":0},{"key":"Exception-8","value":1},{"key":"Exception-9","value":0},{"key":"null","value":10}]}];

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
            .margin({top: 20, right: 20, bottom: 90, left: 50})
            .stacked(true)
            .reduceXTicks(false)
            //  .staggerLabels(true)
            .color(d3.scale.category20().range())
            .x(function(d){ return d.key })
                .rotateLabels(-45)
            .y(function(d){ return d.value })

    chart.xAxis
        .axisLabel('This is X Axix')
   ...