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
| Parameter | Type | Default | Description |
|---|---|---|---|
container | string | #indicator | ID or class of HTML container element (div) |
height | int | 48 | total height of SVG container |
bottomMargin | int | 0 | bottom margin after the stack bar element |
stackMargin | int | 0 | margin between each stack element |
stackHeight | int | 6 | height of stack bar (small value for thin bar) |
stackMinWidth | int | 15 | minimal 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; } |
textPositionEven | int | – 4 | The 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. |
textPositionOdd | int | – 4 | The 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. |
hoverButtonWidth | int | 200 | minimal width of button element when mouse pointer hoovers over |
colorSetting | array | [“#33876b”, “#559559”, “#77a347”, “#98b236”, “#bac024”, “#dcce12”, “#cccccc”, “#b2b2b2”, “#9a9a9a”, “#808080”, “#4a4a4a”, “#121212”] | array of color definitions (HEX values) |
disableEvents | boolean | false | set to true if you do not wish to enable any mouse interaction (clicking) default: enabled events |
data | array | [] | 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 |
Events
| Parameter | Description |
|---|---|
onSectionClick | call 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 |
hoverText | call 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 |
Methods
| Parameter | Description |
|---|---|
update | update 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.