The Horizontal Bar Chart is a reusable data visualization component designed to present comparative and aggregated data in a clear and intuitive horizontal layout. It is especially effective when working with long category labels, ranked data, or side-by-side value comparisons, where vertical charts may reduce readability.
This component dynamically consumes data from OutSystems aggregates and renders the chart using D3.js, ensuring high performance, smooth rendering, and precise control over chart behavior. The horizontal orientation allows users to quickly compare values across categories, making it suitable for dashboards, analytics screens, and reporting modules.
The component is built to align with the OutSystems screen lifecycle, rendering only after the screen and data are fully loaded. It safely handles scenarios such as delayed data loading, empty result sets, and screen refreshes without causing runtime errors or load timeouts. The chart automatically clears and redraws itself when new data is provided, ensuring consistent and accurate visual output.
Visually, the chart displays category labels along the vertical axis and quantitative values along the horizontal axis, using proportional bars for easy comparison. The component is responsive and adapts to different screen sizes when placed inside flexible containers. Styling can be easily customized to match application themes, including bar color, spacing, and axis positioning.
Displays data using horizontal bars for improved readability
Supports dynamic data binding from OutSystems aggregates
Built using D3.js for reliable and efficient rendering
Handles screen load timing and empty data scenarios safely
Reusable across multiple screens and modules
Suitable for dashboards, reports, and analytics views
Sales or revenue comparisons
Category-wise performance metrics
Ranking and leaderboard displays
Operational and analytical dashboards
Reports with long category names