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

Histogram chart

The Dynamic Histogram Chart Component is a powerful data visualization tool that displays the distribution of data across different categories or bins. Histograms are particularly useful for showing frequency distributions, data density, and identifying patterns in data sets. This component works with various data sources and provides multiple configuration options to customize its appearance and behavior for optimal data representation.

Properties

Visual Properties

  • showLegend - Determines whether the legend is displayed alongside the chart. When enabled, a legend with the data series name and corresponding color will be displayed, providing context for the histogram bars.

  • barPadding - Sets the padding between bars in the histogram, specified as a number between 0 and 1. For example, setting this to "0.5" adds moderate spacing between bars for better visual distinction.

  • barWidth - Defines the width of individual bars in the histogram, 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, gaps in the data are omitted rather than shown as zero-height bars.

  • argumentAxisTitle - Sets the title text for the horizontal (x) axis of the histogram. For example, setting this to "Age Groups" clarifies what the categories along the x-axis represent.

  • valueAxisTitle - Sets the title text for the vertical (y) axis of the histogram. For example, setting this to "Number of Customers" clarifies what the height of each bar represents.

  • paddingClass - Configures the padding around the component using CSS classes. For example, "p-4" adds substantial padding on all sides of the histogram component.

Datasource Properties

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

  • dataSourceId - Specifies the data source ID for retrieving histogram data. For example, "api/customer-age-distribution" 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.

  • dataPathExpression - Defines the path to access the actual data array when the response has a nested structure. For example, "data.analysis.distribution" allows accessing deeply nested data structures.

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, "Customer Age Distribution" clearly identifies the purpose of this specific histogram in the component structure.

Authorization

  • visibilityPolicySetId - Determines the visibility of the component based on user permissions and policy sets. For example, setting to "marketingTeamPolicy" restricts the histogram to users with marketing team privileges.

Visibility

  • displayConditions - Defines conditions under which the histogram is displayed. This allows for context-aware visibility, showing the chart only when certain conditions are met (e.g., when a specific data set 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 histogram component.

  • enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this histogram 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 histogram's purpose during a guided tour, with support for translations.

Data Format Requirements

The Histogram Chart component expects data in the following format:

[
  { "category": "0-10", "value": 12 },
  { "category": "11-20", "value": 25 },
  { "category": "21-30", "value": 47 },
  { "category": "31-40", "value": 35 },
  { "category": "41-50", "value": 28 },
  { "category": "51-60", "value": 18 },
  { "category": "61+", "value": 9 }
]

The component will automatically use the "category" field (or equivalent as specified in configuration) for the x-axis labels and the "value" field for the height of each bar.

Common Use Cases

The Dynamic Histogram Chart component is commonly used for:

  1. Age distribution analysis - Showing how many customers fall into each age group
  2. Transaction size analysis - Displaying frequency of transactions across different value ranges
  3. Time-based frequency analysis - Showing number of events occurring during different time periods
  4. Data quality assessment - Visualizing the distribution of values to identify outliers or data skew

Customization Capabilities

The component allows for extensive customization:

  • Bar appearance - Control the width, padding, and color of histogram bars
  • Axis configuration - Add clear titles and configure how values are displayed
  • Legend positioning - Show or hide the legend and control its placement
  • Data filtering - Choose whether to display empty values or filter them out

This flexibility makes the histogram adaptable to various data visualization needs while maintaining a clean and professional appearance.

  • No labels