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.

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

Color & Contrast

  • Assign distinct colors per segment using chartConfiguration → Series colors to differentiate series.
  • Ensure adjacent stacks are distinguishable by picking sufficiently contrasting Series colors.
  • Avoid color-only meaning by combining showLegend with descriptive Tooltip templates.

Tooltips

  • 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

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

Accessibility

  • Convey series meaning textually by enabling the legend (showLegend) with clear series names in chartConfiguration.Series, and pair with concise Tooltip templates; choose high-contrast Series colors.
  • Reduce misinterpretation by omitting missing data points with ignoreEmptyPoints.
  • Offer guided assistance during onboarding with localized guidedTourHotSpotTitle and guidedTourHotSpotDescription.
  • 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.Series so users don’t have to relearn mappings per view.