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: "key" (int): ID of current set "label" (string): label of current set "value" (int): value of current set
`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: "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);`

Download

Plugin minified version
View project on Github: Github Repository