JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://nvd3-community.github.io/nvd3/build/nv.d3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<script src="https://nvd3-community.github.io/nvd3/build/nv.d3.js"></script>
<div id="chart1" >
<svg> </svg>
</div>
CSS
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
JavaScript
var testdata = getTestData().map(function(data, i) {
return {
key: 'Stream' + i,
values: data
};
});
testdata[1].type = "bar";
testdata[1].yAxis = 1;
testdata[2].type = "bar";
testdata[2].yAxis = 1;
testdata[3].type = "bar";
testdata[3].yAxis = 2;
//testdata[3]. = 2;
testdata[4].type = "bar";
testdata[4].yAxis = 2;
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.color(d3.scale.category10().range())
.showControls(false)
.stacked(true);
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
//chart.xAxis.tickFormat(d3.format(',f'));
//chart.yAxis.tickFormat(d3.format(',.1f'));
//chart.yAxis2.tickFormat(d3.format(',.1f'));
//chart.bars1.stacked(true);
//chart.bars2.stacked(true);
chart.bars1.groupSpacing(0.5);
//chart.bars2.groupSpacing(0.5);
d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
return chart;
});
function getTestData() {
return [
[{
"x": 0,
"y": 0.18308100617846632
}, {
"x": 1,
"y": 0.18308100617846632
}, {
"x": 2,
"y": 0.18308100617846632
}, {
"x": 3,
"y": 0.18308100617846632
}, {
"x": 4,
"y": 0.18308100617846632
}, {
"x": 5,
"y": 0.18308100617846632
}, {
"x": 6,
"y": 0.18308100617846632
}, {
"x": 7,
"y": 0.18308100617846632
}, {
"x": 8,
"y": 0.18308100617846632
}, {
"x": 9,
"y": 0.18308100617846632
}, {
"x": 10,
"y": 0.18308100617846632
}, {
"x": 11,
"y": 0.18308100617846632
}, {
"x": 12,
"y": 0.18308100617846632
}, {
"x": 13,
"y": 0.18308100617846632
}],
[{
"x": 0,
"y": 0.3848121729491284
}, {
"x": 1,
"y": 0.3848121729491284
}, {
"x": 2,
"y":...