simple graph

<!DOCTYPE html>
<meta charset="utf-8">

body {
	font-family: Futura;
	font-size: 10px;
}

.bar-group {
  font-family: Futura;
}

.axis line {
	stroke-opacity: .5;
	stroke: #fff;
}

.axis text {
	font-family: Futura;
  font-size: 6px;
}

button {
  font-family: Futura;
}

</style>

var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var xScale = d3.scaleBand()
    .padding([.1])
    .range([0,width])

var yScale = d3.scaleLinear()
    .range([height, 0])

var colorScale = d3.scaleOrdinal(d3.schemeCategory20c);

// var colorScale = d3.scaleLinear()
//   .range(["yellow", "purple", "green"])
//   .domain([0, 12, 25])
//   .interpolate(d3.interpolateHsl);

// var colorScale = d3.scaleSequential(d3.interpolateRainbow);

var svg = d3.select("body").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 data = [
  {month: "January", apples: 3840, bananas: 1920, cherries: 960, dates: 400},
  {month: "February", apples: 1600, bananas: 1440, cherries: 960, dates: 400},
  {month: "March", apples:  640, bananas:  960, cherries: 640, dates: 400},
  {month: "April", apples:  320, bananas:  480, cherries: 640, dates: 400}
];

var stack = d3.stack()
    .keys(["apples", "bananas", "cherries", "dates"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

var series = stack(data);

console.log(data);
console.log(series);

xScale.domain(d3.set(data.map(function(d) { return d.month })).values());

var allMaxValues = [];
series.forEach(function(d) {
  d.forEach(function(d) {
    allMaxValues.push(d[1])
  })
})

var maxValue = d3.max(allMaxValues, function(d) { return d; });
yScale.domain([0, maxValue]);

// x axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale))

// y axis
svg.append("g")
  .attr("class", "y axis")
  .call(d3.axisLeft(yScale))

// appends the rect
svg.selectAll(".bar-group")
  .data(series)
.enter().append("g")
  .attr("class", "bar-group")
  .style("fill", function(d) { return colorScale(d.key); })
  .selectAll(".bar")
  .data(function(d) { return d; })
.enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return xScale(d.data.month); })
  .attr("y", function(d) { return yScale(d[1]); })
  .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
  .attr("width", xScale.bandwidth)

// https://github.com/d3/d3-shape/blob/master/README.md#stack-orders
var orderButtons = d3.select("body")
    .selectAll(".stack-order")
    .data(["stackOrderAscending","stackOrderDescending","stackOrderInsideOut","stackOrderNone","stackOrderReverse"])
  .enter().append("button")
    .attr("class", "stack-order")
    .text(function(d) { return d; })
    .on("click", function(stackOrder) {

stack.order(d3[stackOrder])
      series = stack(data);

d3.selectAll(".bar-group")
      .data(series)
      .selectAll(".bar")
      .data(function(d) { return d })
      .transition()
      .duration(1000)
      .attr("y", function(d) { return yScale(d[1]); })
      .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })

})

// https://github.com/d3/d3-shape/blob/master/README.md#stack-offsets
var stackButtons = d3.select("body")
    .selectAll(".stack-offset")
    .data(["stackOffsetWiggle","stackOffsetSilhouette","stackOffsetNone","stackOffsetExpand"])
  .enter().append("button")
    .attr("class", "stack-order")
    .text(function(d) { return d; })
    .on("click", function(stackOrder) {

stack.offset(d3[stackOrder])
      series = stack(data);

yScale.domain([0, maxValue]);

d3.select(".y")
        .transition()
        .duration(1000)
        .call(d3.axisLeft(yScale))
      d3.selectAll(".bar-group")
      .data(series)
      .selectAll(".bar")
      .data(function(d) { return d })
      .transition()
      .duration(1000)
      .attr("y", function(d) { return yScale(d[1]); })
      .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); });

})

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v0.3.min.js