Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/metabase/metabase/llms.txt

Use this file to discover all available pages before exploring further.

The InteractiveDashboard component renders a fully interactive dashboard with drill-down actions, click behaviors, and the ability to view and interact with questions.

​
Basic usage

import { InteractiveDashboard } from '@metabase/embedding-sdk-react';

function Analytics() {
  return <InteractiveDashboard dashboardId={1} />;
}

​
With event handlers

<InteractiveDashboard
  dashboardId={1}
  onLoad={(dashboard) => {
    console.log('Dashboard loaded:', dashboard);
  }}
  onLoadWithoutCards={(dashboard) => {
    console.log('Dashboard structure loaded:', dashboard);
  }}
/>

​
With initial parameters

Set initial filter values: 
<InteractiveDashboard
  dashboardId={1}
  initialParameters={{
    region: 'North America',
    date_range: '2024-01-01~2024-12-31',
  }}
/>

​
Hiding parameters

Hide specific dashboard parameters from the UI: 
<InteractiveDashboard
  dashboardId={1}
  hiddenParameters={['internal_filter', 'debug_mode']}
/>

​
With auto-refresh

Automatically refresh the dashboard at a specified interval (in seconds): 
<InteractiveDashboard
  dashboardId={1}
  autoRefreshInterval={300} // Refresh every 5 minutes
/>

​
Customizing visibility

<InteractiveDashboard
  dashboardId={1}
  withTitle={false}
  withCardTitle={false}
  withDownloads={false}
  withSubscriptions={false}
/>

​
With plugins

Customize click actions and dashboard behavior: 
const plugins = {
  mapQuestionClickActions: (clickActions, clickedDataPoint) => {
    return [
      ...clickActions,
      {
        name: 'view-details',
        onClick: () => {
          console.log('View details:', clickedDataPoint);
          // Navigate to detail view
        },
      },
    ];
  },
  dashboard: {
    dashboardCardMenu: ({ dashcard, result }) => {
      return [
        {
          name: 'Custom Action',
          icon: 'star',
          onClick: () => console.log('Custom action', dashcard),
        },
      ];
    },
  },
};

<InteractiveDashboard dashboardId={1} plugins={plugins} />

​
Custom drill-through question

Customize the drill-through question view: 
import { InteractiveDashboard, InteractiveQuestion } from '@metabase/embedding-sdk-react';

function CustomDashboard() {
  return (
    <InteractiveDashboard
      dashboardId={1}
      renderDrillThroughQuestion={(questionProps) => (
        <div className="custom-drill-through">
          <h2>Drill-through Details</h2>
          <InteractiveQuestion {...questionProps} />
        </div>
      )}
    />
  );
}

​
Drill-through question configuration

<InteractiveDashboard
  dashboardId={1}
  drillThroughQuestionHeight={600}
  drillThroughQuestionProps={{
    withChartTypeSelector: true,
    withDownloads: true,
  }}
/>

​
With data picker configuration

Configure which entity types are available in data pickers: 
<InteractiveDashboard
  dashboardId={1}
  dataPickerProps={{
    entityTypes: ['questions', 'models'],
  }}
/>

​
Enable entity navigation

Allow navigation to questions and cards: 
<InteractiveDashboard
  dashboardId={1}
  enableEntityNavigation={true}
/>

​
With visualization change handler

<InteractiveDashboard
  dashboardId={1}
  onVisualizationChange={(question) => {
    console.log('Visualization changed:', question);
  }}
/>

​
Complete example

import { InteractiveDashboard } from '@metabase/embedding-sdk-react';
import { useState } from 'react';

function AnalyticsDashboard() {
  const [parameters, setParameters] = useState({
    region: 'Global',
    period: 'Q4',
  });

  return (
    <div className="analytics-container">
      <div className="dashboard-header">
        <h1>Sales Analytics</h1>
        <div className="controls">
          <select 
            value={parameters.region}
            onChange={(e) => setParameters({ ...parameters, region: e.target.value })}
          >
            <option value="Global">Global</option>
            <option value="North America">North America</option>
            <option value="Europe">Europe</option>
          </select>
        </div>
      </div>

      <InteractiveDashboard
        dashboardId={1}
        initialParameters={parameters}
        withTitle={true}
        withCardTitle={true}
        withDownloads={true}
        withSubscriptions={true}
        autoRefreshInterval={300}
        enableEntityNavigation={true}
        onLoad={(dashboard) => {
          console.log('Dashboard loaded:', dashboard?.name);
        }}
        plugins={{
          mapQuestionClickActions: (actions, dataPoint) => {
            return [
              ...actions,
              {
                name: 'export-data',
                onClick: () => {
                  console.log('Export:', dataPoint);
                },
              },
            ];
          },
        }}
        style={{
          border: '1px solid #e5e7eb',
          borderRadius: '8px',
          minHeight: '600px',
        }}
      />
    </div>
  );
}

​
Props

​
dashboardId
SdkDashboardId
required
The ID of the dashboard. Can be:
  • Numerical ID (e.g., 1)
  • Entity ID string (e.g., "abc123")
​
token
string
Signed token for guest embed scenarios.
​
initialParameters
ParameterValues
Initial parameter values for dashboard filters.
​
hiddenParameters
string[]
List of parameter names to hide from the UI.
​
withTitle
boolean
default:"true"
Whether to show the dashboard title.
​
withCardTitle
boolean
default:"true"
Whether to show titles on dashboard cards.
​
withDownloads
boolean
default:"true"
Whether to enable download functionality.
​
withSubscriptions
boolean
default:"true"
Whether to enable dashboard subscriptions.
​
autoRefreshInterval
number
Auto-refresh interval in seconds.
​
enableEntityNavigation
boolean
default:"false"
Whether to enable navigation to individual questions and cards.
​
style
React.CSSProperties
Custom CSS styles.
​
className
string
Custom CSS class name.
​
plugins
MetabasePluginsConfig
Plugin configuration for customizing behavior.
​
dataPickerProps
{ entityTypes?: EntityTypeFilterKeys[] }
Configuration for data picker dialogs.
​
drillThroughQuestionHeight
number
Height for drill-through question views.
​
drillThroughQuestionProps
DrillThroughQuestionProps
Props to pass to drill-through question components.
​
renderDrillThroughQuestion
(props: DrillThroughQuestionProps) => ReactNode
Custom renderer for drill-through questions.
​
onLoad
(dashboard: MetabaseDashboard | null) => void
Callback when the dashboard loads with all cards.
​
onLoadWithoutCards
(dashboard: MetabaseDashboard | null) => void
Callback when the dashboard structure loads (without card content).
​
onVisualizationChange
(question: MetabaseQuestion) => void
Callback when a visualization type changes.
​
children
ReactNode
Custom content (for future extensibility).

​
TypeScript types

import type {
  InteractiveDashboardProps,
  MetabaseDashboard,
  MetabaseQuestion,
  ParameterValues,
  SdkDashboardId,
  DrillThroughQuestionProps,
} from '@metabase/embedding-sdk-react';

​
Features

​
Drill-through actions

Users can click on data points to:
  • Filter by value
  • View underlying records
  • Break out by dimensions
  • Navigate to related questions

​
Click behaviors

Dashboard cards support:
  • Custom URL navigation
  • Cross-filtering
  • Dashboard tab switching
  • External link opening

​
Real-time updates

Dashboards can automatically refresh at specified intervals to show the latest data.

​
Parameter passing

Filters can be passed between cards and synchronized across the dashboard.