Bar Chart

Bar Charts display a single series of data represented by horizontal bars. The data represented can also be categorized by color to represent relationships between similar data values.

Usage
Configuration
Examples

The Bar Chart is the simplest chart available and is generally used for displaying quantities of different objects or categories, such as in operational dashboards. While the Bar Chart is a flexible means of visualizing data, it's best used for representing one series of data or one series that can be divided into groups where the most important comparison is the quantity of each value (i.e. it's better to chart ticket sales of the top films during a given month than attempt to chart the ticket sales and the prices of those tickets).

When visualizing change in a variable over time, consider using the Timeline Chart instead.

Anatomy

Card background
Chart title
Group legend
X-axis values
Y-axis values
Data value
Expansion button

Best practices

Keep Bar Charts simple. Limit the number of variables and always make values for one axis numeric.
Use TraceLink accessible colors. Be especially careful to avoid using any tone of red and green together, because people with certain types of color blindness cannot distinguish between them.
Avoid re-using colors within a single chart unless those colors reflect the same data values or a relationship between those values. If you do re-use colors, include a legend.
Use distinct colors to display comparative data (i.e. when you're comparing different data points).
Bar Charts should predominantly be used horizontally (i.e. with the bars originating on the y axis and moving across the x axis.
Configure Bar Charts as extra large components, and no smaller than small, on the grid, and keep in mind that the smaller a chart is configured, the denser the data will display.
Include a title, except when the component is positioned directly beneath a Screen Header or Section Header that provides an appropriate title.
If pairing a Bar Chart with another component on the same row, provide a title for each component.

Common patterns

With Vertical Tabs

Vertical Tabs allow users to switch between different views of the same chart when paired with a Bar Chart. See how the genre tabs display different data from the same data source in the images below. This pattern is particularly useful when there are enough objects that a legend would be impractical.

With Timeline Chart

Timeline Charts are often incorporated into the Bar Chart expansion, which can show the selected variable or data point over time. For example, a user could select a movie title in the Bar Chart and see in the Timeline Chart a breakdown of ticket sales by gender over different time periods.

Properties

Apply Card Background checkbox – Optional. If selected, a card background is applied to the chart, which sets the component apart from the screen background. If not selected, the default background displays.
Background Color field – Optional. The hex code for the bar chart background color.
Chart Data Source field – Required. The query that retrieves the data for the bar chart, including the X-axis Label and Y-axis Label values, based on the data model.
Condition to Exclude X Values field – Optional. A single expression using logical operators that determines when X values matching a specified condition are excluded from the chart (e.g. x>10).
Condition to Exclude Y Values field – Optional. A single expression using logical operators that determines when Y values matching that condition are excluded from the chart (e.g. y>10).
X-axis Label field – Optional. The label that displays for the X-axis.
Y-axis Label field – Optional. The label that displays for the Y-axis.
Enable Diagonal checkbox – Optional. If selected, the X-axis values are displayed diagonally. If not selected, the X-axis values are displayed horizontally.
Organize Data in Groups checkbox – Optional. If selected, the bars in the chart are categorized by color using the colors defined in Group Colors and the labels retrieved in Group Label Data Source.
Show Legend checkbox – Optional. If selected, and Organize Data in Groups or Allow Multi-series Data Source is selected, group labels display as legends above the chart data.
Group Label Data Source field – Conditionally required if Organize Data in Groups is selected. The query that retrieves the data for the group labels and corresponding X-axis values.
Group Colors section – Conditionally required if Organize Data in Groups is selected. A section of properties used to configure the labels and colors that display for the data group:
- Label field – Optional. The label that displays for the data group, retrieved from the Group Label Data Source.
- Color field – Optional. The hex code for the group label text.
Bar Color field – Conditionally required if Organize Data in Groups or Allow Multi-series Data Source is not selected. The hex code for the bars in the chart.
Title field – Optional. The title that displays for the chart.
Chart Orientation drop-down – Optional. Specifies the orientation of the chart:
- Vertical – (default) The chart is oriented vertically.
- Horizontal – The chart is oriented horizontally.
Show Menu on Select checkbox – Optional. If selected, a menu displays when a user selects a data point.
Menu Item Label field – Conditionally required if Show Menu on Select is selected. The label that displays for the menu when selected by the user.
Show Grid Lines checkbox – Optional. If selected, grid lines display on the chart.
Show Data Values checkbox – Optional. If selected, values display on each data point. If not selected, data values only display when the user hovers over a data point.
Allow Filtering checkbox – Optional. If selected, a filter for users to filter chart data displays.
Filter Data Source field – Conditionally required if Allow Filtering is selected. The query that retrieves the fields used to filter the chart data.
Allow Collapse checkbox – Optional. If selected, users can collapse and expand the chart.
Collapse Initially checkbox – Optional. If selected, the chart displays as collapsed when the screen loads.
Expand Label field – Optional. The label that displays as the button to expand and collapse the chart.
Show Expand Icon checkbox – Optional. If selected, an Expand icon displays next to the Expand Label button.
Show Additional Info Icon checkbox – Optional. If selected, users can expand the chart to view additional information.
Show Data Values on Select checkbox – Optional. If selected, a pop-up containing the relevant data value displays when a user selects a data point.
Allow Pagination checkbox – Optional. If selected, the chart is paginated if the content exceeds the available screen space.
Maximum Data Values Per Page field – Optional. The maximum number of values to display per page.
Show X-axis Labels Inside Chart checkbox – Optional. If selected, X-axis values display directly beside the data plot point. If not selected, X-axis values display as a label along the X-axis.
Default Group Color field – Optional. The hex code for all groups not specified in Group Colors.
Exclude Y Values of Zero checkbox – Optional. If selected, Y-axis values of zero do not display.
Exclude X Values of Zero checkbox – Optional. If selected, X-axis values of zero do not display.
Keep Values Selected in Chart checkbox – Optional. If selected, when a user selects a data point, relevant context-sensitive information in other parts of the screen reflects that current selection.
Allow Multi-series Data Source checkbox – Optional. If selected, multi-series data sources can be queried in Data Series, and the series are grouped by category in the chart.
If Allow Multi-series Data Source is selected, Organize Data in Groups cannot be selected. Bar Charts can use data groups or multi-series data, but not both.

Data Series section – Conditionally required if Allow Multi-series Data Source is selected. A section of properties used to configure each series within the multi-series data source:
- Label field – Optional. The label that displays for a series within the multi-series data source.
- Color field – Optional. The hex code for a series label text within the multi-series data source.
- Data Source field – Required. The query that retrieves the data for a series within the multi-series data source, based on the data model.
Allow Users to Select Category checkbox – Optional. If selected, and Allow Multi-series Data Source is selected, users can select an individual data point within a multi-series data category or select the entire category of multi-series data points. If not selected, users can only select individual data points.
Visibility Permission field – Optional. The user's permission to access the component. If a user is not assigned a role that includes this permission, they cannot view or interact with the component.
Visibility Permission Not Assigned drop-down – Optional. If the user does not have permission to access the component, specifies whether to hide or disable it:
- Hide – The component is hidden.
- Disable – The component is visible but not cannot be interacted with.

Emitted Events

On Data Value Select – The user selects a data point.
On Menu Item Select – The user selects a menu item.
On Additional Info Icon Select – The user selects the additional info icon.
On Filter Apply – The user applies a filter.

Functions

Set Additional Conditions on Data Source – When invoked in an event, defines and applies additional conditions to the Chart Data Source beyond the default.
Set Data Source – When invoked in an event, the chart updates.
Get Selected Data Value – When invoked in an event, the X-axis value and Y-axis value are retrieved.
Set Filters – When invoked in an event, the current selected filters are applied.
Get Filters – When invoked in an event, returns all current selected filters.

With groups

Organize Data in Groups selected.
Show Legend selected.
Group Label Data Source included.
Group Colors:
- Label included.
- Color included.
Title included.
Chart Orientation set to Horizontal.
Show Grid Lines selected.
Show X-axis Labels Inside Chart selected.
Allow Multi-Series Data Source not selected.

With multi-series data, category selected

Organize Data in Groups not selected.
Show Legend selected.
Title included.
Chart Orientation set to Horizontal.
Show Grid Lines selected.
Show X-axis Labels Inside Chart selected.
Allow Multi-Series Data Source selected.
Data Series:
- Label included.
- Color included.
- Data Source included.
Allow Users to Select Category selected.

With title, in vertical orientation

Organize Data in Groups not selected.
Bar Color included.
Title included.
Chart Orientation set to Vertical.
Show Grid Lines selected.

Horizontal orientation

Organize Data in Groups not selected.
Bar Color included.
Title not included.
Chart Orientation set to Horizontal.
Show Grid Lines selected.
Show X-axis Labels Inside Chart selected.