Page History
(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.
...
- visibilityPolicySetId – Determines the visibility of the component based on user permissions and policy sets. For example, setting to
"salesTeamPolicy"restricts the chart to users with sales team privileges.
Links
- Figma: tba
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/stacked-bar
Guidelines
Usage
- 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
displayNameso it’s identifiable in the structure panel.
...
- Map the categorical axis using
chartConfiguration → Category fieldand define all stack contributors inchartConfiguration → 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 withgetEntityCollectionHttpRequestParametersMapfor predictable filtering/slicing.
Visibility & Authorization
...
- Provide guided tour copy per locale with
guidedTourHotSpotTitleandguidedTourHotSpotDescription. - Use
displayNamefor authoring clarity without affecting end-user labels.
Dos & Don’ts
| Do | Don’t | Article setting(s) |
|---|---|---|
| Define a fixed series order so stacks are comparable across categories. | Let series order vary between renders. | chartConfiguration.Series, events.ON_INIT |
Use ignoreEmptyPoints to omit nulls so totals aren’t misread. | Render nulls as zero-length segments. | ignoreEmptyPoints |
| Turn on the legend when multiple series exist. | Force users to guess segment meaning from color alone. | showLegend, chartConfiguration.Series colors |
| Use tooltip templates for supplemental details. | Put critical identifiers only in tooltips. | Tooltip templates, showLegend, Category field |
| Adjust bar width/padding to fit the category count. | Keep default sizing that causes overlap or sparse layouts. | barWidth, barPadding |
| Hide the chart until prerequisites are met. | Show an empty/misleading chart before data is ready. | displayConditions, dataSourceId, useMockData |
...
