Page History
...
- 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.
Guidelines
- Always use the defined chart color palette to maintain clarity and brand consistency.
- Assign a unique color to each series to make stacked values easy to read.
- Ensure enough contrast between stacked or adjacent segments for accessibility.
- Apply the official palette to stay aligned with the overall design system.
Accessibility
...
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.
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.
Color & Contrast
- Assign distinct colors per segment using
chartConfiguration → Series colorsto differentiate series. - Ensure adjacent stacks are distinguishable by picking sufficiently contrasting
Series colors. - Avoid color-only meaning by combining
showLegendwith descriptiveTooltip templates.
Tooltips
- Provide concise, structured details for each segment using
chartConfiguration → Tooltip templates. - Keep tooltips supplemental; ensure essential identifiers are visible through
showLegendand the axis labels given byCategory 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 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 with
getEntityCollectionHttpRequestParametersMapfor predictable filtering/slicing.
Visibility & Authorization
- Gate visibility by role/policy with
visibilityPolicySetId. - Show or hide the chart based on runtime rules using
displayConditions.
Content & Localization
- 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 |
Accessibility
- Convey series meaning textually by enabling the legend (
showLegend) with clear series names inchartConfiguration.Series, and pair with conciseTooltip templates; choose high-contrastSeries colors. - Reduce misinterpretation by omitting missing data points with
ignoreEmptyPoints. - Offer guided assistance during onboarding with localized
guidedTourHotSpotTitleandguidedTourHotSpotDescription. - Keep tooltip content short and localized in
Tooltip templates; never rely on tooltips as the sole source of critical information. - Maintain consistent series order using
chartConfiguration.Seriesso users don’t have to relearn mappings per view.