How to dynamically hide and show charts

This technical guide explains how to dynamically show or hide specific charts or components in a dashboard, triggered by user interactions such as toggles or filters.

Hiding a Chart or Component

To hide a component on the dashboard:

1. Set the hide Property to true
   Use the hide property when embedding via a web component or iframe to hide the desired component. For more details, refer to the documentation linked in the respective embedding method.

   Here are links to the embedding parameter for Web Component or iFrame

   In the editor, select the component you want to hide to determine its unique name.

Triggering the Show/Hide Functionality

This section demonstrates how to hide a chart dynamically when an end user interacts with a dropdown filter.

1. Set Up the Filter
   Begin by configuring the dropdown filter and linking it to the relevant component in the editor. Ensure that the values match up to the component name that you want to hide in Explo

2. Listen for Events
   Use the sendVariableUpdatedEvent method to set up an event listener. This listener will detect when the dropdown value changes.

3. Update the Embed Code
   Once the event is received:

   • Extract the filter value (which should match the component name).

   • Modify the embed code to set the component's hide property to true as explained in the previous section.

By following these steps, you can enable dynamic updates to your dashboard, improving interactivity and user experience. For additional details, consult the embedding documentation for your specific method.