d3 v4 stack bar

d3 v4 stacked bar chart

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id='stacked-bar'></div>

CSS

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis--x path {
  display: none;
}

.path-line {
  fill: none;
  stroke: yellow;
  stroke-width: 1.5px;
}

svg {
  background: #f0f0f0;
}

.selected {
  stroke: #333;
  stroke-width: 4;
}

JavaScript

var initStackedBarChart = {
  draw: function(config) {
    me = this,
      domEle = config.element,
      stackKey = config.key,
      data = config.data,
      margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
      },
      parseDate = d3.timeParse("%m/%Y"),
      width = 550 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom,
      xScale = d3.scaleBand().range([0, width]).padding(0.1),
      yScale = d3.scaleLinear().range([height, 0]),
      color = d3.scaleOrdinal(d3.schemeCategory20),
      xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b")),
      yAxis = d3.axisLeft(yScale),
      svg = d3.select("#" + domEle).append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var stack = d3.stack()
      .keys(stackKey)
      .order(d3.stackOrderNone)
      .offset(d3.stackOffsetNone);

    var layers = stack(data);
    data.sort(function(a, b) {
      return b.total - a.total;
    });
    xScale.domain(data.map(function(d) {
      return parseDate(d.date);
    }));
    yScale.domain([0, d3.max(layers[layers.length - 1], function(d) {
      return d[0] + d[1];
    })]).nice();

    var layer = svg.selectAll(".layer")
      .data(layers)
      .enter().append("g")
      .attr("class", "layer")
      .style("fill", function(d, i) {
        return color(i);
      });

    layer.selectAll("rect")
      .data(function(d) {
        return d;
      })
      .enter().append("rect")
      .attr('class', 'bar')
      .attr("x", function(d) {
        return xScale(parseDate(d.data.date));
      })
      .attr("y", function(d) {
        return yScale(d[1]);
      })
      .attr("height", function(d) {
        return yScale(d[0]) - yScale(d[1]);
      })
      .attr("width", xScale.bandwidth())
      .on('click', function(d, i) {
   ...