Interactivity (8 min)
Completion requirements
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/679164039/1_menu.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/679164039/1_menu.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/969285604/2_showlegend.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/969285604/3_advancedlegend.png)
2. In the Configure Advanced Legend screen, you can choose to further format and customize your legend.
![Screenshot of the configure advanced legend window](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/969285604/4_configureadvancedlegend.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/969285604/5_legendplacement.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/969285604/2_showlegend.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/969285604/3_advancedlegend.png)
2. In the Configure Advanced Legend screen, you can choose to further format and customize your legend.
![Screenshot of the configure advanced legend window](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/969285604/4_configureadvancedlegend.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/969285604/5_legendplacement.png)
04 Axis
You can choose to show or hide your X and Y axes.
![](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/253739392/6_xy_axis.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/253739392/7_xy_increments.png)
![](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/253739392/6_xy_axis.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/253739392/7_xy_increments.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/613283990/8_chartdetails.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/613283990/9_chartdetails_config.png)
When the user clicks on one of the bars, a modal will open and display a detailed breakdown.
![Screenshot of the chart details modal](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/613283990/10_chartdetailsmodal.png)
1. Enable the Chart Details function and click the gear icon.
![Screenshot of the Bar Chart settings menu with the bar chart feature highlighted](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/613283990/8_chartdetails.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/613283990/9_chartdetails_config.png)
When the user clicks on one of the bars, a modal will open and display a detailed breakdown.
![Screenshot of the chart details modal](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/613283990/10_chartdetailsmodal.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/914768604/11_customtooltip.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/914768604/12_customHTML.png)
When the user hovers over your chart, the tooltip will display.
![Screenshot of the tooltip popup](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/914768604/13_tooltip_preview.png)
1. Enable the Custom Tooltip function and click the gear icon.
![Screenshot of the doughnut chart settings with the custom tooltip feature highlighted](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/914768604/11_customtooltip.png)
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](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/914768604/12_customHTML.png)
When the user hovers over your chart, the tooltip will display.
![Screenshot of the tooltip popup](https://academy.titandxp.com/pluginfile.php/3539/mod_custompage/topics/914768604/13_tooltip_preview.png)