Drill Highlighter

The Drill Highlighter feature helps users focus on specific data points by drilling down and visually highlighting the selected elements across charts. As you drill down to more granular data, the selected item is emphasized, making its impact clearer across the dashboard.

Available for: Bar, Timeline, Bubble, Group Bar, Group Column, Mixed, Scatterplot, Line, and Column charting components.

Set up

1. Drag & drop Bar and Bubble charts onto the canvas and assign data to both.

2. Enable Drill Highlighter (dashboard script)

   • Navigate to the dashboard script area and add:

   sdk.getWidget('bar1' ).enableDrillHighlighter = true;

   Replace 'bar1' with your actual Bar chart widget ID.

3. Enable Drill (source component script)

   • Go to the source component script area (e.g., the Bar chart script) and add:

   sdk.applyDrill(['bubble2'], changedItem.attributes);

   Replace 'bubble2' with the target widget ID you want to update/highlight.

4. Preview the dashboard.

5. Interact

   • Click a bar in the Bar chart.

   • The drill is applied to the associated Bubble chart, and the Drill Highlighter is applied to both charts.

Tips:

• Widget IDs must match your canvas (e.g., bar1, bubble2).

• You can target multiple charts by adding more IDs to the array: sdk.applyDrill(['bubble2','line1'], changedItem.attributes);

• If your environment requires an event handler, place sdk.applyDrill(...) inside the chart’s selection/click event.

Troubleshooting

• No highlight shown: Confirm enableDrillHighlighter is set to true on the source widget ID and that the ID is correct.

• No drill applied to the target: Ensure the target ID in sdk.applyDrill([...]) is correct and that changedItem.attributes is available in the script context.

• Nothing changes on click: Verify you placed the code in the source component script and that the chart supports drill/highlight.