Embed a Visualizations Created in Analytical Designer
To embed an existing visualization created in Analytical Designer, use the InsightView component.
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" } }} />