<div id='info'>
<h3><code>stacked();</code></h3> 
<p>Enable bar chart to stack onto each other.</p> 
<p>Below example shows how stacking works.</p>  
<p><code>.stacked(<button class='rs-btn--small rs-btn--selected' onclick ='stacked_true()'>true</button><button class='rs-btn--small' onclick ='stacked_false()'>false</button>);</code></p>  
</div>
<div id='chart'></div>

#info{
  margin: 1em;
}
//Redsift
//stacked();
//enable stacking of bar chart

let stack = [ [ 1, 9 ], [ 5, 2 ], [ 2, 5 ], [ 10, 1 ]];

let chart = d3_rs_bars.html()
                       .stacked(true)
                       .width(500);

d3.select('#chart').datum(stack).call(chart);

//toggle enable stack
function stacked_true(){
let chart = d3_rs_bars.html()
                       .stacked(true)
                       .width(500);

d3.select('#chart').datum(stack).call(chart);
  
}

//toggle disable stack
function stacked_false(){
let chart = d3_rs_bars.html()
                       .stacked(false)
                       .width(500);

d3.select('#chart').datum(stack).call(chart);
  
}

// Generic function to toggle selected state of a button
d3.selectAll('button')
  .on('click', function() {
    let selected = this;
    d3.selectAll('button')
      .classed('rs-btn--selected', function() {
        return (selected === this);
      });
  });
View Compiled

External CSS

  1. https://static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core.min.css

External JavaScript

  1. https://d3js.org/d3.v4.min.js
  2. https://static.redsift.io/reusable/d3-rs-bars/latest/d3-rs-bars.umd-es2015.min.js