(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Stacked Bar Chart

Link to Figma: tba

Overview

• The Dynamic Stacked Bar Chart Component visualizes data as horizontal bars stacked on top of each other.
• It helps compare contributions of categories to a total and shows the composition of each entity.
• The component connects to data sources for dynamic data retrieval.
• It offers multiple configuration options for appearance and behavior.

...

• Use to compare each category’s part-to-whole composition with horizontal stacks by mapping fields in chartConfiguration (Series, Category field).
• Name the component clearly for authors via displayName so it’s identifiable in the structure panel.

Sizing & Layout

• Control visual density with barWidth (thicker bars for short category lists, thinner for long lists).
• Improve legibility between categories with barPadding.
• Add outer breathing room around the component using paddingClass.

...

• Provide concise, structured details for each segment using chartConfiguration → Tooltip templates.
• Keep tooltips supplemental; ensure essential identifiers are visible through showLegend and the axis labels given by Category field.
• Localize or format values inside the template directly in Tooltip templates (e.g., units/percentages).

Data-Driven / Conditional Behavior

• Map the categorical axis using chartConfiguration → Category field and define all stack contributors in chartConfiguration → Series.
• Keep stacks comparable by using consistent series keys across categories in chartConfiguration.Series.
• Prefer omitting missing values to avoid misleading totals by enabling ignoreEmptyPoints.
• Parameterize data retrieval with getEntityCollectionHttpRequestParametersMap for predictable filtering/slicing.

...