Embed visualizations

To embed a visualization saved in Analyze, use the InsightView component.

1. Get the identifier of the visualization. Copy it from the browser’s address bar when the visualization is open in Analyze, or use the Insights constants that catalog-export generates.

2. Render InsightView with that identifier, and import the styles of @gooddata/sdk-ui-ext once in your app:

   import { InsightView } from "@gooddata/sdk-ui-ext";
   import "@gooddata/sdk-ui-ext/styles/css/main.css";
   
   export function MyVisualization() {
       return (
           <div style={{ height: 400 }}>
               <InsightView
                   insight="<visualization-id>"
                   config={{
                       colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
                       legend: {
                           enabled: true,
                           position: "bottom",
                       },
                   }}
               />
           </div>
       );
   }
   

   InsightView reads the backend and the workspace from BackendProvider and WorkspaceProvider; pass the backend and workspace props to override them. See Integrate into an existing application.

For every prop of the component, see InsightView.