<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Stacked Bar Chart></title>
<script src="https://d3js.org/d3.v7.js"></script>
</head>
<body>
<script>
// width and height
const w = 500;
const h = 300;
// original data
const dataset = [
{ apples: 5, oranges: 10, grapes: 22 },
{ apples: 4, oranges: 12, grapes: 28 },
{ apples: 2, oranges: 19, grapes: 32 },
{ apples: 7, oranges: 23, grapes: 35 },
{ apples: 23, oranges: 17, grapes: 43 }
];
// set up stack method
const stack = d3.stack()
.keys([ "apples", "oranges", "grapes" ])
.order(d3.stackOrderDescending);
// data, stacked
const series = stack(dataset);
// set up scales
const xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.range([0, w])
.paddingInner(0.05);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d.apples + d.oranges + d.grapes)])
.range([h, 0]);
// use one of the built-in d3 color scales
const colors = d3.scaleOrdinal(d3.schemeCategory10);
// create SVG element
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// add a group for each row of data
const groups = svg.selectAll("g")
.data(series)
.enter()
.append("g")
.style("fill", (d, i) => colors(i));
// add a rect for each data value
const rects = groups.selectAll("rect")
.data(d => d)
.enter()
.append("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => yScale(d[1]))
.attr("height", d => yScale(d[0]) - yScale(d[1]))
.attr("width", xScale.bandwidth());
</script>
</body>
</html>