Stacked Bar Graph With jQuery and D3.js - StackBars

StackBars is a well-written, flexible plugin that facilitates the stacking of multiple bars to create a percent indicator graph.

Built on top of jQuery and d3.js libraries. You can use it for displaying progress, percentages of tax, costs, progress bars etc.

How to use it:

1. Load the necessary jQuery and d3.js libraries in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/d3.min.js"></script>

2. Load the Stackbars plugin after jQuery.

<script src="plugin.js"></script>

3. Create an empty DIV for the stacked bar graph.

<div id="indicator"></div>

4. Define your pencentage values in a JS array as follows:

const myData = [
      {
        "key": 0, // unique ID
        "label": "Element 1", // Label text
        "value": 1
      },
      {
        "key": 1, 
        "label": "Element 2", 
        "value": 1
      },
      {
        "key": 2, 
        "label": "Element 3", 
        "value": 1
      },
      // ...
]

5. Generate a stacked bar graph from the data you provide.

var bars = $("#indicator").stackbars({
    data: myData,
});

6. Customize the appearance of the stacked bar graph.

var bars = $("#indicator").stackbars({
    data: myData,
    height: 48, // container height
    bottomMargin: 0,
    container: '#indicator',
    colorSetting: ["#33876b","#559559","#77a347","#98b236","#bac024","#dcce12","#cccccc","#b2b2b2","#9a9a9a","#808080","#4a4a4a","#121212"],
    stackMargin: 0,
    stackHeight: 6, // bar height
    textPositionEven: -4,
    textPositionOdd: -4,
    hoverButtonWidth: 200,
    stackMinWidth: 15,
    disableEvents: false, // disable mouse interaction
});

7. Trigger a function when a section is clicked.

var bars = $("#indicator").stackbars({
    data: myData,
    onSectionClick: function (obj) {
      // do something
    },
});

8. Trigger a function when hover over the stacked bar.

var bars = $("#indicator").stackbars({
    data: myData,
    hoverText: function (obj) {
      // do something
    }
});

9. Update the stacked bar graph.

$("#indicator").stackbars("update", newData);

---

This awesome jQuery plugin is developed by jpweinerdev. For more Advanced Usages, please check the demo page or visit the official website.