How to Create and Embed Custom Visualizations in Apache Superset Using React

~ Sanket Jain

Apache Superset is a powerful open-source tool for data exploration and visualization. It simplifies creating interactive dashboards, offering many built-in visualizations and robust SQL database support. But what if you want to go beyond the default charts? What if you want to embed Superset dashboards in your React app for a seamless, customized user experience?

In this guide, we will:

1. Set up Superset using Docker
2. Create a custom “Hello World” visualization plugin
3. Embed a Superset dashboard into a React application

This article is designed to give you both the basics and the customization options for making Superset work for your project.

1. Introduction to Custom Visualizations and Embedding in Superset

Superset is built for flexible data exploration, but it becomes truly powerful when you can extend it with custom visualizations and embed its dashboards directly into web applications. Whether you’re building a SaaS analytics dashboard or integrating it into a business intelligence portal, Superset offers powerful integration capabilities.

While Superset’s rich set of default charts will cover most use cases, sometimes your data visualization needs may require something custom. You can create plugins to meet those needs, all while embedding Superset dashboards into a React app to provide seamless interactivity.

2. Setting Up Superset Using Docker

To get started, we need to set up an Apache Superset instance locally. Using Docker simplifies this process, as it automatically manages dependencies and configurations.

Step 1: Clone the Superset Repository

First, clone the official Superset repository:

git clone https://github.com/apache/superset

Step 2: Navigate to the Directory

Move into the directory you just cloned:

cd superset

Step 3: Start Superset Using Docker Compose

Run the following Docker command to pull the required images and start Superset:

docker compose -f docker-compose-image-tag.yml up

Step 4: Access Superset

Superset will be accessible on http://localhost:8088. You can log in using the default credentials:

• Username: admin
• Password: admin

With Superset up and running, we can move on to creating custom visualization.

3. Building a “Hello World” Custom Visualization Plugin

Creating custom visualizations in Superset involves generating a plugin using the Yeoman generator and integrating it into Superset’s visualization engine. This allows you to tailor visualizations to your data and specific needs.

Step 1: Install Yeoman and Set Up the Generator

Install Yeoman, a scaffolding tool, and set up the Superset generator:

npm install -g yo
cd superset-frontend/packages/generator-superset
npm install npm
npm link

Step 2: Create a Directory for Your Plugin

Create a new directory for your custom plugin:

mkdir /tmp/superset-plugin-chart-hello-world 
cd /tmp/superset-plugin-chart-hello-world

Step 3: Initialize the Plugin

Use the Yeoman generator to scaffold the plugin:

yo @superset-ui/superset

Step 4: Install and Build the Plugin

Install dependencies and build the plugin:

npm install --force npm run build

Step 5: Add the Plugin to Superset

Add your plugin to Superset by installing it into the frontend:

npm install --save /tmp/superset-plugin-chart-hello-world

4. Embedding a Superset Dashboard in Your React App

Now that you have a working Superset instance, let’s focus on embedding a Superset dashboard into a React application. This process will help create a seamless experience for your users, who can access interactive dashboards without leaving your application.

Step 1: Set Up Your React Application

If you don’t already have a React app, you can create one using create-react-app:

npx create-react-app my-superset-app
cd my-superset-app

Step 2: Use an IFrame to Embed the Dashboard

The simplest way to embed Superset dashboards in a React app is by using an iframe. This allows you to render the entire dashboard within your app’s interface.

Here’s how you can do it:

1. First, in Superset, go to the dashboard you want to embed.
2. In the top-right corner, click on the “Share” button and select “Get Embeddable URL.”
3. Copy the URL provided.

Now, in your React app, create a component to embed the dashboard using the iframe.

This component will render the Superset dashboard directly within your React application, allowing users to interact with the data without navigating away.

import React from 'react';

const SupersetDashboard = () => {
  return (
    <div>
      <iframe
        width="100%"
        height="800px"
        title="Superset Dashboard"
        style={{ border: 'none' }}
        src="http://localhost:8088/superset/dashboard/your_dashboard_id/?standalone"
      />
    </div>
  );
};

export default SupersetDashboard;

Step 3: Authentication

Embedding Superset dashboards requires proper authentication. You can use JSON Web Tokens (JWT) or OAuth2 to authenticate users and ensure they have access to the dashboards.

To use JWT with Superset:

1. Generate a token on the backend.
2. Pass the token in the iframe URL query string or request header.

This ensures only authenticated users can access and view the embedded dashboards, keeping your data secure.

fetch('http://localhost:8088/api/v1/chart/data', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    "queries": K,
    "metrics": ["count"],
    "granularity": "ds",
    "groupby": ["category"],
    "time_range": "Last month",
  }),
})
.then(response => response.json())
.then(data => setChartData(data.result[0].data));

5. Advanced Customization: Creating a React Component for Superset Visualizations

If you want more control over the data visualizations, you can create custom React components that fetch data from the Superset API and render it using libraries like Recharts or D3.js.

Here’s an example using Recharts:

`import React, ‹ useEffect, useState } from 'react';
import & LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'rec
const SupersetChart = () →> {
    const [chartData, setChartDatal = useState(I);
        useEffect(() => {
fetch 'http://localhost:8088/api/v1/chart/data', {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
'Content-Type': 'application/json'
body: JSON.stringify({
                        "queries": K
"metrics": ["count"],
                        "granularity": "ds",
                        "groupby": ["category"],
                        "time_range": "Last month"
                    }1
})
})
.then(response => response.json())
    .then(data => setChartData(data.result[0].data));
}, [1);
return (
    <LineChart width={600} height={300} data={chartData}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="category" />
        <YAxis />
        < Tooltip />
        <Legend />
«Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
);
};
export default SupersetChart;`

This approach allows you to handle raw data from Superset and customize how it’s rendered in your React app.

6. Conclusion

By following this guide, you’ve not only created a custom visualization plugin in Apache Superset but also embedded a Superset dashboard into your React application. This seamless integration provides a powerful way to deliver data insights within modern web applications.

With Superset’s flexibility and the power of React, you can create an interactive, data-driven user experience that scales with your application needs.