Anatomy
- Chart title (Optional): Title of table which can be wrapped or hidden
- Refresh button: Manually refreshes data
- Y axis label: Displays the grouped by row names
- X axis label: Displays the grouped by column names
- Data value: Numerical or logical value that determines the cell color based on a given color palette
- Legend: Shows the values for each color in the chart
Subcomponents
See the usage guidelines for button iconic.
See the usage guidelines for heading.
See the usage guidelines for text link.
See the usage guidelines for loader.
Usage
Use a heatmap to present data as a two-dimensional visual matrix, where values are encoded in colors, delivering a convenient, insightful view of information. The heatmap is represented in a data table with rows and columns denoting sets of categories. Each cell in the table contains a numerical or logical value that determines the cell color based on a given color palette.
Configurations
Learn how to customize heatmap by configuring the available properties.
Data source
You can select between different data sources for your visualization: system data tables and preconfigured Performance Analytics indicators. If you are changing your data source, the option list provides suggestions based on previous selections and items that match your search.
Tables
You can select any table from the system to use in your visualization and filter that data. When you apply a table as the data source, a preview list appears showing all available records in that table.
A condition builder above the list enables you to set filter conditions on the data before using it in your visualization. This is useful for limiting the data shown in the chart to only the data you need.
Indicators
Indicators are preconfigured business metrics that assess performance across attributes such as cost, quality, technical risk, investments, user satisfaction, and business value. Indicators are configured in the Performance Analytics application and reflect common measurements that users need. If breakdowns are defined for an indicator, you can apply filter conditions on those values.
Data snapshot indicators
Data snapshot type of indicators enable intraday collection and analysis, filtering by breakdown hierarchy, with the ability to report partial scores.
Key features:
- Move beyond daily snapshots: Collect and analyze data multiple times throughout the day (intraday) for granular insights.
- Breakdown hierarchy: Filter through hierarchical structures (department to team to individual) to pinpoint issues and identify trends at any level.
- Partial scores: Track progress toward goals mid-period in order to take corrective action early instead of waiting for periods to close.
- Deeper insights: Drill down through multiple dimensions to uncover hidden patterns.
- Simplified setup: Create fewer, more generalized indicators.
- Dynamic filtering: Apply breakdowns on-demand without preconfiguration.
- Reduced maintenance: Fewer indicators mean less ongoing work.
Metric selection
Select the specific data from the data source to display in the data heatmap and the label that identifies it. Select an aggregation type from the dropdown list. You can select a specific field from the data source table to display. If you leave the field empty, all fields are used, depending on any filtering conditions you applied when you selected the data source.
Show incomplete periods
For Data Snapshot indicators only. To provide users real time progress tracking, for each “Metric” you can select the “Show incomplete periods” setting to display scores for the current, incomplete period to track progress.
Auto aggregation periods
For Data Snapshot Indicators, automatically picks the best aggregation period when a date filter is used. Affects only this visualization and does not change the indicator's default aggregation period. Clear the checkbox to always use the indicator's default period.
Grouping data
To build the heatmap, you select how you want the data broken down and grouped. As you add the grouping column and row elements, the grouping happens as the heatmap is built.
Sort
You can enable a sorting feature that orders the data columns by name or by value, in ascending or descending order. Sorting is available for both data source types; table and indicator.
No value display format
By default, when the metric value is set to “Count,” you can choose to show zero (0) when there’s no value in the selected dataset or configurations.
Header and border
The component header displays along the top and contains the title you give the visualization. By default, the header is configured to show, but the content is empty.
Visualization border
By default, a border around the chart. Unselect the “Show border” option to remove it.
Header separator
You can add a separator line between the header and the visualization. Disabled by default.
Chart title
By default, the chart title is blank, but you can add a title. When you add a title for your chart, you’re able to customize the color and make it wrap.
Heading level
By default, text in the header is set to heading level 2 (H2). Heading levels H1 through H6 are also available.
Title alignment
By default, the title is aligned to the Start side. The start size can be the left or right depending on the language you use. Other options available from the dropdown are “Center” and “End”.
Title wrap
By default, long titles truncate with an ellipsis, and a tooltip showing the full title on hover, but you can set the title to wrap instead.
Title truncation
By default, the title text truncates at the end of the first line of text, but you can set the line of truncation to 2 or 3 lines instead. This option becomes available when the title truncates.
Refresh option
By default, refresh is available to the user in the “More options” menu, but you can hide it. This gives you more control over how refresh options are exposed on dashboards so you can align refresh behavior with your intended usage.
Header background color
By default, the color of the header background is neutral-0 (white). You can specify a different color (including a custom color) for the background.
Select a color for the visualization header background that aligns with your dashboard theme, branding, or design preferences. The color you choose applies only to the visualization header background.
For better accessibility, make sure a good color contrast exists between the header background and title text. The minimum contrast requirement for normal text is 4.5:1, and for large text is 3:1. To verify, check the contrast ratio in the color picker.
Note: Theming is not supported when you select a custom color.
Title color
By default, the title text is neutral-21 (black). You can select a different color (including a custom color) for the title text.
You should select a color for the chart title that aligns with your dashboard theme, branding, or design preferences. The color you choose applies only to the chart title.
For better accessibility, make sure a good color contrast exists between the header background and title text. The minimum contrast requirement for normal text is 4.5:1, and for large text is 3:1. To verify, check the contrast ratio in the color picker.
Note: Theming is not supported when you select a custom color.
Data updates
Configure filter conditions and enable data drilldown from data points on the heatmap. You can configure your heatmap to update on a defined refresh interval - measured in minutes.
Follow filters
You can configure a data visualization to allow the use of individual chart filters and allow a chart to use the filters set on that workspace page. Filters set on the data source always run on the component. The “Follow filters” property, which is set to “true” by default, applies any filters set on the workspace page in addition to those set on the data source. Setting the “Follow filters” option to “false” prevents any filter input from the workspace page.
Filter icon
The filter icon and the number of filters impacting the visualization display by default. To hide them, unselect the “Show filter icon.”
Data drilldown
By default, users can drill down into data or launch a URL directly from a chart by selecting data points, slices, categories, or scores. This lets users view data such as records and record lists from data tables or KPI data from indicators or go to a URL that you specify.
Drill down label
You can add text that appears in tooltips and describes what happens when the user selects a chart data point.
Refresh after being away
You can configure your visualization to refresh after the user has been away from a page for more than a specified number of minutes.
Refresh requested
When the new value of this property is different from the previous one, you can trigger refresh by setting up a string that can be passed down.
Use data cache
You can cache user queries to shorten the load time for the data visualization. Unselected by default.
Info messages
Displays generic error messages by default.
Extended error messages
You can choose to show extended error messages which contain more details that can be helpful to admins. Unselected by default.
Custom no data message
By default, when a data source doesn’t return any info, the “no data available” message displays with generic content. However, you can set a custom message by changing the title, illustration, and message content.
Presentation
The presentation properties control the physical appearance of the chart. Use these properties to control how your users consume the data.
Display settings
You can use the following to modify the display of the data visualization.
Data table
You can use this setting to show a table with chart and graph data under the chart for easier screen reader access.
% of total tooltip
By default, when the user hovers over a data point such as a bubble, the percentage of the total Y axis value is displayed in a tooltip.
Data label
You can hide the heatmap chart labels that are shown by default.
Legend
The legend is hidden by default, but you can use the “Show legend” toggle to enable it. If you choose to show the legend, it appears below the heatmap chart. You can change the location to above, below, to the right, or to the left of the chart.
Colors
By default, the theme based colors (a range of blues) are applied to the background in the heatmap chart. You can set the color type to “Color range” and use the controls to set the “Low color value” and and “High color value.”
Design recommendations
Learn how to apply heatmap in your design.
Alignment and positioning
Heatmap is always centered within the container and retains a fixed height/width ratio. It can’t be manually adjusted.
Behavior
Learn how heatmap behaves when the display changes or a user interacts with the component.
Chart positioning
The height and width of the chart is responsive to the data visualization container size.
Responsive behaviors
Heatmap is responsive to the width and height of the container.
Interactions
When the enable drilldown property is active, users can select data points in a pivot table to open individual records. You can deactivate this property and use the UI Builder “Events” tab to set the redirections on click to any other page.
Hover
In heatmap, when the user places their pointer over a cell the color of the cell brightens.
Usability
Heatmap complies with all internationalization and accessibility requirements.
Internationalization
When this component is used in a platform configured for a right-to-left (RTL) language, all elements flip and the text aligns to the right.
Accessibility
Learn how to access the actionable elements of heatmap through keyboard interactions and screen readers.
Heatmap tab order
Keyboard interactions
You can access the actionable elements of heatmap with these keyboard keys:
- Tab: Moves to one of the cell in heatmap
- Enter or space bar: Triggers an action associated with an interactive element when in focus, such as refreshing the data or triggering chevrons to open and close.
- Arrow right, arrow left: Moves left to right on each cell
- Arrow up, arrow down: Moves up and down on each cell
Screen readers
When you apply ARIA labels to a component, screen readers announce the controls and content of pivot table in the prescribed tab order.
