block by eesur 287b5700b5881e8899cc7301a5fefb94

d3js | single stacked bar

Full Screen

single stacked bar, removes 0 values (as they can’t be seen on the bar), groups data, and cumulates values for stacked placement (instead of using d3.stack()) and calculates percentage (all in groupData.js file/function)

overrides defaults via passing in config:

var myConfig: {
    f: d3.format('.1f'),
    margin: {top: 20, right: 10, bottom: 20, left: 10},
    width: 800,
    height: 200,
    barHeight: 100,
    colors: ['#457c39', '#ffeb00', '#1aa9bc'],
  }

stackedBar('.someDiv', data, myConfig)

script.js

index.html

dist.css

dist.js

groupData.js

sampleData.js

style.styl