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

# Visualization custom element

> Embed a saved visualization with the legacy gd-insight element, set its workspace, locale, title, filters, and size, and subscribe to its events.

API reference: [InsightView()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.insightview/index.md) (function)

> **Legacy element:**
> `gd-insight` is the legacy visualization element, kept for existing integrations. For new integrations, use `gd-insight-embed`, which adds the `filters`, `title`, `config`, and `context` properties, the `refresh()` method, and the `gd-ready` and `gd-error` events. See [Dashboard and visualization embed elements](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/embed-custom-elements/index.md).

`gd-insight` embeds a single saved visualization. It renders the [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/insightview/index.md) component:

```html

<gd-insight insight="my-visualization-id"></gd-insight>
```

> **Give the element a height:**
> The `gd-insight` element uses a flex layout that adjusts to the size of its container. If the container doesn't have `display: flex`, the element has zero height. You can also set the height explicitly with CSS, for example with the inline `style="height: 500px"`.

> **Note:**
>  The term 'insight' is an obsolete expression for 'visualizations' but is still employed within the SDK's components and functions.

## [Supported attributes](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/insight-custom-element/#supported-attributes)

```html

<gd-insight
    insight="my-visualization-id"
    workspace="my-workspace-id"
    locale="en-US"
    title="Custom visualization title"
    mapbox="my-mapbox-token"
    agGrid="my-ag-grid-license-key"
></gd-insight>
```

- `insight` - required, the ID of the visualization to embed.
- `workspace` - optional, the ID of the workspace of this visualization. By default, it's taken from the context, for example from the script URL.
- `locale` - optional, defaults to `en-US`. The localization of the visualization UI. Use the hyphenated form (`en-US`, `de-DE`); an unknown value falls back to `en-US`. For all available languages, see [the full list of available localizations][1].
- `title` - optional. As a boolean attribute, it renders the title stored with the visualization. As a string, it renders that string instead.
- `filters` - optional, a JSON array of filter objects applied to the visualization. An invalid value is logged with `console.error` and ignored.
- `mapbox` - optional, a Mapbox access token used by geo charts. Overrides the `mapboxToken` from the context.
- `agGrid` - optional, an AG Grid license key used by pivot tables. Overrides the `agGridToken` from the context.

```html

<gd-insight insight="my-visualization"></gd-insight>

<gd-insight insight="my-visualization" title></gd-insight>

<gd-insight insight="my-visualization" title="My custom title"></gd-insight>
```

You can also set the workspace ID once on the context instead of passing it to every element. See the code example in [Web Components authentication][2].

> **Note:**
> The locale affects only the UI elements, not your data or the metadata language.

## [Supported events](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/insight-custom-element/#supported-events)

`gd-insight` emits the following events. The `detail` of each event is the argument of the matching [[`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.insightview/index.md) callback][3]:

- `drill` - the user drilled in the visualization. The detail is the drill event, [`IDrillEvent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.idrillevent/index.md).
- `error` - loading or computing the visualization failed. The detail is the [`GoodDataSdkError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.gooddatasdkerror/index.md).
- `exportReady` - the visualization is ready to be exported. The detail is the export function, [`IExportFunction`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iexportfunction/index.md); call it to export the data.
- `loadingChanged` - the loading state of the visualization changed. The detail is `ILoadingState`.
- `insightLoaded` - the visualization definition has loaded. The detail is the [`IInsight`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iinsight/index.md).

Events don't bubble and aren't cancelable. Subscribe to them as to any other DOM event:

```html
<gd-insight insight="my-visualization" id="some-dom-id"></gd-insight>
<script>
    const insightEl = document.getElementById("some-dom-id");
    insightEl.addEventListener("insightLoaded", (event) => {
        // See what's in the event payload
        console.log(event.detail);
    });
</script>
```

[1]: https://github.com/gooddata/gooddata-ui-sdk/blob/master/libs/sdk-model/src/base/localization.ts
[2]: ../web-components-auth/
[3]: ../../../visualisations/insightview/#props