JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.js"></script>
<div class="her">
<div class="testChart"></div>
</div>
CSS
.chartpath { /*note: not #line-gradient*/
fill: none;
stroke: url(#line-gradient);
stroke-width: 7px;
stroke-linejoin: "round";
}
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
.chartpath_old {
fill:none;
stroke: #000;
stroke-width: 1px;
}
JavaScript
//Width and height
var w = 100;
var h = 300;
var padding = 30;
var dataset = [
[5, 0], [5, 90], [5, 50], [5, 33], [5, 95],
[5, 12], [5, 44], [5, 67], [5, 21], [5, 88],
[5, 200]
];
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("x", 40)
.attr("y", 200+padding)
.attr("width", 20)
.attr("height", 150);
//Create circles
//Create labels
//Create X axis
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);