Grafana Embed POC

Embed Grafana dashboards in a React application using Docker.

Setup

Requirements: Docker, Node.js, npm

# Start Grafana
docker compose up -d

# Start frontend
cd frontend
npm install
npm run dev

Access:

• Grafana: http://localhost:3000
• Frontend: http://localhost:5173

Structure

grafana-embed-poc/
├── docker-compose.yml    # Grafana container setup
├── frontend/             # React application
│   ├── src/
│   │   ├── App.tsx      # Main component with iframe
│   │   └── main.tsx     # React entry point
│   ├── index.html       # HTML template
│   ├── package.json     # Dependencies
│   └── vite.config.ts   # Build config
├── grafana/
│   ├── README.md        # Detailed Grafana configuration guide
│   └── provisioning/    # Auto-configures Grafana on startup
│       ├── dashboards/  # Dashboard definitions and config
│       └── datasources/ # Data source connections
└── README.md

See grafana/README.md for detailed explanation of provisioning files.

Configuration

Grafana runs with:

• Anonymous access enabled
• Embedding allowed
• No user registration

Commands

# Stop containers
docker compose down

# View logs
docker compose logs grafana -f

# Restart with fresh data
docker compose down -v && docker compose up -d

For more Docker setup options, see Grafana's Docker installation guide.

Usage

1. Create dashboards in Grafana at http://localhost:3000
2. Get embed URL from dashboard share button
3. Add iframe to React component

Example:

<iframe
  src="http://localhost:3000/d-solo/dashboard-uid/panel-name?orgId=1&panelId=1"
  width="800"
  height="400"
  style={{ border: "none" }}
/>

For more embedding options, see the official embedding documentation.

Learn More

• Grafana Documentation - Complete official documentation
• Docker Setup Guide - Official Docker installation guide
• Dashboard Creation - How to build dashboards
• Embedding Dashboards - Complete embedding guide
• Provisioning - Automate Grafana setup