> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# onDrill

> Handle drill events with the onDrill callback when users click drillable items in InsightView and the chart components.

API reference: [IVisualizationCallbacks](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) (interface), [IDrillEvent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.idrillevent/index.md) (interface)

The `onDrill` callback runs when the user clicks a [drillable item](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/drillable-items/index.md) in a visualization. [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.insightview/index.md), the chart components, and the pivot table accept it. Use it to respond to the click in your app, for example to open a detail view filtered by the clicked value.

## [Structure](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/on-drill/#structure)

```ts
onDrill?: (event: IDrillEvent) => void | boolean;
```

The [`IDrillEvent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.idrillevent/index.md) holds:

- `dataView`: the data the visualization was rendered from.
- `drillContext`: what the user clicked, including the type of the clicked element and the `intersection` of measures and attribute values at that point.

## [Example](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/on-drill/#example)

```tsx
import { HeaderPredicates, type IDrillEvent } from "@gooddata/sdk-ui";
import { InsightView } from "@gooddata/sdk-ui-ext";

function handleDrill(event: IDrillEvent) {
    console.log(event.drillContext.intersection);
}

export function DrillableVisualization() {
    return (
        <InsightView
            insight="<visualization-id>"
            drillableItems={[HeaderPredicates.identifierMatch("<measure-or-attribute-id>")]}
            onDrill={handleDrill}
        />
    );
}
```

## [Notes](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/on-drill/#notes)

- After `onDrill` runs, the visualization also dispatches a `drill` DOM event that bubbles up from the visualization's element, with the same [`IDrillEvent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.idrillevent/index.md) as its `detail`. Return `false` from `onDrill` to stop that DOM event; any other return value lets it through.
- Only items that match `drillableItems` are drillable. Without `drillableItems`, `onDrill` never runs. See [Make visualizations drillable](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/drillable-items/index.md).