BarChart | UI components (BETA)
- Title: the title of the chart.
- Legend: lists the data categories with their corresponding color for readability.
- Axis label: the label for the axis.
- Data labels: labels for data points.
Parameter | Type | Description |
---|---|---|
data
Required
| Object | An object containing the chart's data in an array. Data should be formatted as comma-separated objects containing key-value pairs. Data will be displayed in the order it's provided, so any sorting will need to be done before passing it to the component. While it's recommended to pre-format your data to be human-readable, you can also provide the Learn more about formatting data. |
axes
Required
| Object | Configures the chart's axes. Using the
You can also include an
Learn more about chart axes. |
options
| Object | Additional chart configuration options. Options include:
Learn more about chart options. |
To apply colors to a chart for visual clarity, you can group data fields by color using the groupFieldByColor
parameter within the axes options
. For example, the bar chart below use groupFieldByColor
to add colors to each Product
defined in the dataset.
For comparison, below is the same chart without groupFieldByColor
configured for the axes:
Colors will be automatically assigned in a preset order. To customize the color selection order, include the colorList
field in the options
prop, then specify the colors to pick from as shown below.
groupFieldByColor
. To do so, include the colors
field within the axes options
, then specify each field value and color, as shown below. Learn more about colors.Use the stacking axes option to stack grouped data rather than rendering individual bars. For example, the following bar chart displays the number of deals by deal stage. The data also includes the sales rep who owns each deal. Because two sales reps have deals in the same deal stage, stacking
has been set to true
to visually combine the data into one bar.
dealstage
field data is not written in a human-readable format (e.g., appointmentScheduled
), the data prop includes propertyLabels
in its options
to convert the labels. Note that the data prop formatting is slightly different to accommodate both the dataset and its options
. Learn more about data options.
For comparison, below is the same chart without stacking. In this version, each sales rep has their own bar in the deal stage category.
- DO: title your data categories with human-readable text so they are easy to understand.
- DO: use sentence-casing for the data categories and chart title (only first letter capitalized).
- DO: sort your data in ascending/descending order of your x-axis field to prevent unordered rendering prior to passing it to a charting component. If you intend to display information over time, your data will be displayed in the order you provide it.
- DO: display the chart legend if you’re graphing more than one category of data. This prevents your users from having to rely only on color to identify different data on your chart.
- DO: for readability, use larger surfaces to showcase charts, such as the record page middle column. Avoid using charts with many data points on smaller surfaces such as the preview panel or sidebar.
- DON’T: use more than 14 data categories unless it cannot be avoided for your use case.
- DON’T: use the same colors to indicate different data categories.
Thank you for your feedback, it means a lot to us.