Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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.
  • 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 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.

Visibility & Authorization

...

  • Provide guided tour copy per locale with guidedTourHotSpotTitle and guidedTourHotSpotDescription.
  • Use displayName for authoring clarity without affecting end-user labels.

Dos & Don’ts

DoDon’tArticle 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

...