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