Animated Stacked Bars Percentage Indicator jQuery Plugin | StackBars

StackBars is a jQuery plugin for animated stacked bars percentage indicator to indicate percentage values with the option to click each bar for D3.js based selection purposes.

chart js stacked bar example, stacked bar chart js, chart js stacked bar chart horizontal, chart js dynamic stacked bar chart, stacked bar chart with line chart js

How to make use of it:

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

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

2. Load the Stack Bars plugin after jQuery.

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

3. Create a blank DIV for the stacked bar graph.

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

4. Define the percentage values in the 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. Create 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. Run a function when you click on a section.

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

8. Run a function when hovering over the stacked bar.

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

9. Refresh the stacked bar graph.

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

Options and parameters

containerstring#indicatorID or class of HTML container element (div)
heightint48total height of SVG container
bottomMarginint0bottom margin after the stack bar element
stackMarginint0margin between each stack element
stackHeightint6height of stack bar (small value for thin bar)
stackMinWidthint15minimal width of stack bar to show percentage value above (hide text if bar is very small)
this corresponds to the textsize
text { font-size: 11px; }
textPositionEvenint– 4The percentage text value for each stack bar can be positioned above or under the bar.
negative value for above
positive value for under
This value will change all even items.
textPositionOddint– 4The percentage text value for each stack bar can be positioned above or under the bar.
negative value for above
positive value for under
This value will change all odd items.
hoverButtonWidthint200minimal width of button element when mouse pointer hoovers over
colorSettingarray[“#33876b”, “#559559”, “#77a347”, “#98b236”, “#bac024”, “#dcce12”, “#cccccc”, “#b2b2b2”, “#9a9a9a”, “#808080”, “#4a4a4a”, “#121212”]array of color definitions (HEX values)
disableEventsbooleanfalseset to true if you do not wish to enable any mouse interaction (clicking)
default: enabled events
dataarray[]data array: [{“key”: 0, label: “Element”, “value”: 1}]
object properties:
“key” (int): ID of current set
“label” (string): label of current set
“value” (int): value of current set


onSectionClickcall back function for click event
object keys:
“key” (int): ID of clicked element
“label” (string): label of clicked element
“value” (int): value of clicked element
“percent” (string): percentage value of clicked element
“total” (int): total amount of all data
hoverTextcall back function for custom hover text format
expects string as return value
object keys:
“key” (int): ID of current element
“label” (string): label of current element
“value” (int): value of current element
“percent” (string): percentage value of current element
“total” (int): total amount of all data


updateupdate graph
method name “update”
expects second parameter “data”
var data = []; $(“#indicator”).stackbars(“update”, data);

Stacked Bar Graph With jQuery and D3.js, StackBars Plugin/Github

See Demo And Download

Official Website(jpweinerdev): Click Here

This superior jQuery/javascript plugin is developed by jpweinerdev. For extra Advanced Usages, please go to the official website.

Leave a Comment