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

Stacked bar chart

The Dynamic Stacked Bar Chart Component is a powerful data visualization tool that displays data as horizontal bars stacked on top of each other. This chart type is particularly useful for comparing contributions of different categories to a total and showing the composition of each entity. The component connects to data sources and provides various configuration options to customize its appearance and behavior.

Properties

Visual Properties

• showLegend - Determines whether the legend is displayed alongside the chart. When enabled, a legend with all series names and their corresponding colors will be displayed, providing context for the data representation.

• barPadding - Sets the padding between bars in the chart, specified as a number. For example, setting this to "5" adds moderate spacing between bars for better visual separation.

• barWidth - Defines the width of individual bars in the chart, specified as a number. For example, setting this to "30" creates bars with a width of 30 pixels, allowing for control over the chart's density.

• ignoreEmptyPoints - Determines whether empty or null data points are displayed in the chart. When enabled, missing data points are omitted rather than shown as zeros, helping focus on actual data.

• chartConfiguration - Configures the series and visual aspects of the chart. This includes settings for each data series, colors, tooltips, and more. This property uses a detailed configuration object to control how data is mapped to visual elements.

• paddingClass - Configures the padding around the component using CSS classes. For example, "p-3" adds medium padding on all sides of the chart component.

Datasource Properties

• useMockData - Determines whether sample data is used instead of an actual data source. When enabled, the chart displays pre-defined sample data, which is useful for design and testing purposes.

• dataSourceId - Specifies the data source ID for retrieving chart data. For example, "api/sales-by-region" connects the chart to an endpoint that provides the appropriate data structure for visualization.

• getEntityCollectionHttpRequestParametersMap - Configures HTTP request parameters for fetching data. This allows for customizing query parameters, path variables, or body parameters that are sent when requesting data from the specified source.

Event Actions

• events - Configures events that the component can trigger and respond to:
• ON_INIT: Triggered when the component is initialized. This event can be used to perform setup operations or initial data processing.
• ON_DESTROY: Triggered when the component is removed from the DOM. This event can be used for cleanup operations or resource release.

General

• displayName - Sets the display name of the component shown in the structure panel. For example, "Regional Sales Breakdown" clearly identifies the purpose of this specific chart in the component structure.

Authorization

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

Visibility

• displayConditions - Defines conditions under which the chart is displayed. This allows for context-aware visibility, showing the chart only when certain conditions are met (e.g., when a specific product category is selected).

Testing Hooks

• id - Specifies a unique identifier for the component, useful for programmatic access in testing or custom code.

• dataTestId - Sets a testing hook ID for automated testing, allowing test scripts to reliably identify this chart component.

• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this chart can be highlighted during onboarding tours.

• guidedTourHotSpotTitle - Sets the title text displayed when this component is highlighted in a guided tour, with support for translations.

• guidedTourHotSpotDescription - Sets the descriptive text explaining the chart's purpose during a guided tour, with support for translations.

Data Format Requirements

The Stacked Bar Chart component expects data in the following format:

[
  { 
    "region": "North America", 
    "product1": 10000, 
    "product2": 5000, 
    "product3": 15000 
  },
  { 
    "region": "Europe", 
    "product1": 12000, 
    "product2": 8000, 
    "product3": 10000 
  },
  { 
    "region": "Asia", 
    "product1": 8000, 
    "product2": 9000, 
    "product3": 6000 
  }
]

The chartConfiguration property determines which fields are used for the category axis (e.g., "region") and which fields are used as stack series (e.g., "product1", "product2", "product3").

Chart Configuration Details

The chartConfiguration property allows for detailed control of how data is visualized:

• Series: Define which data fields should be represented as stacked bars
• Category field: Specify which field contains the category labels (displayed on the y-axis)
• Series colors: Customize the color of each series for better visual distinction
• Tooltip templates: Customize what information appears when hovering over bars

This component is designed to handle both simple and complex data structures, making it versatile for various business visualization needs.