Embed a Visualizations Created in Analytical Designer

To embed an existing visualization created in Analytical Designer, use the InsightView component.

Note

The term ‘insight’ is an obsolete expression for ‘visualizations’ but is still employed within the SDK’s components and functions.

Steps:

Obtain the identifier of the visualization via catalog-export.
Import the InsightView component from the @gooddata/sdk-ui-ext package into your app:
```
import { InsightView } from "@gooddata/sdk-ui-ext";
```

Create an InsightView component in your app, and provide it with the workspace ID and the visualization identifier that you obtained at Step 1:

import { InsightView } from "@gooddata/sdk-ui-ext";
import "@gooddata/sdk-ui-ext/styles/css/main.css";

<InsightView
    insight="aby3polcaFxy"
    config={{
        colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
        legend: {
            enabled: true,
            position: "bottom"
        }
    }}
/>

Embed a Visualizations Created in Analytical Designer

Related