Embed a Visualizations Created in Analytical Designer

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

Steps:

1. Obtain the identifier of the visualization via catalog-export.

2. Import the InsightView component from the @gooddata/sdk-ui-ext package into your app:

   import { InsightView } from "@gooddata/sdk-ui-ext";
   

3. 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"
           }
       }}
   />