This lesson will cover the following topics:

02 | Settings
03 | Legend
04 | Axis

01 Getting Started

This tutorial covers chart and graph interactivity options.

02 Settings

To navigate to the settings menu:

1. Click the element.

2. Select the gear icon from the element menu. The element settings menu opens.

A screenshot showing how to navigate to the element settings menu

03 Legend

You can choose to show or hide the chart/graph legend. By default, the legend will be displayed.

1. Click the Interactivity tab in the element settings menu.

2. Use the Show Legend toggle switch to enable or disable the legend.

Screenshot of the bar chart settings displaying the Show Legend function

To configure advanced legend options:

1. Enable the Advanced Legend feature and click the gear icon.

Screenshot of bar chart settings displaying the interactivity tab

2. In the Configure Advanced Legend screen, you can choose to further format and customize your legend.

Screenshot of the configure advanced legend window

You can configure the placement of your legend using the options in the Interactivity tab.

Screenshot of bar chart settings displaying the legend placement options

04 Axis

You can choose to show or hide your X and Y axes.



You can also configure how each axis displays, including the minimum, maximum, and increments.

Screenshot of the Bar Chart Settings menu with the Axis configuration options highlighted

05 Chart Details

To allow users to open up details about the chart in a modal:

1. Enable the Chart Details function and click the gear icon.

Screenshot of the Bar Chart settings menu with the bar chart feature highlighted

2. In the Salesforce Configuration window, you can choose what details the user will see. These steps are similar to configuring your chart source so ensure you review that lesson.

Screenshot of the Salesforce configuration window

When the user clicks on one of the bars, a modal will open and display a detailed breakdown.

Screenshot of the chart details modal

06 Custom Tooltip

Tooltips are only available on the doughnut chart and stacked line chart.

1. Enable the Custom Tooltip function and click the gear icon.

Screenshot of the doughnut chart settings with the custom tooltip feature highlighted

2. Using the Custom HTML options, you can choose the placement of your tooltip and configure the message to display.

Screenshot of the Custom HTML configuration page

When the user hovers over your chart, the tooltip will display.

Screenshot of the tooltip popup

07 Got Feedback?

Additional Resources