jQuery-Plugin with D3.js: Stack Bars Indicator
Animated stacked bars percentage indicator jQuery plugin
jQuery Plugin for indicating percentage values with the option of clicking on each bar for selection purpose
Minimal html configuration
<div id="indicator"></div>
jQuery initialization and customization
This plugin requires jQuery (>= 1.8.x) and D3.js (>= v5.4.0).
CSS: text { fill: #777; font-family: Helvetica, Arial; font-size: 11px; } .stack:hover { cursor: pointer; } Script: $("#indicator").stackbars({ data: [], height: 48, bottomMargin: 0, container: '#indicator', colorSetting: ["#33876b","#559559","#77a347","#98b236","#bac024","#dcce12"], stackMargin: 0, stackHeight: 6, textPositionEven: -4, textPositionOdd: -4, hoverButtonWidth: 200, stackMinWidth: 15, disableEvents: false, onSectionClick: function (obj) { console.log("Clicked Section Data",obj); }, hoverText: function (obj) { return obj.value +" ("+obj.percent+"): " + obj.label; } });
Parameters
Parameter | Type | Default | Description |
---|---|---|---|
data
|
array | [] | data array: [{"key": 0, label: "Element", "value": 1}] object properties: |
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 default: enabled events |
Events
Parameter | Description |
---|---|
onSectionClick
|
call back function for click event object keys: |
hoverText
|
call back function for custom hover text format expects string as return value object keys: |
Methods
Parameter | Description |
---|---|
update
|
update graph method name "update" expects second parameter "data" var data = []; $("#indicator").stackbars("update", data); |
Download
Plugin minified versionView project on Github: Github Repository