Grafana Dashboard Embedding
Grafana can embed in third-party apps via iframe. Cheaper than building custom dashboards from scratch, and sensible when you already have Grafana with configured datasources and dashboards—just display them in your interface, possibly with SSO auth.
Two Embedding Modes
Anonymous iframe—simplest. Grafana allows anonymous access to specific dashboards. Good for public dashboards (service monitoring, public stats).
Grafana Embedded (9.1+)—embedding with service account token. Iframe gets JWT token, Grafana verifies without user login. Right choice for authenticated apps.
Grafana Configuration
# grafana.ini
[security]
allow_embedding = true
[auth.anonymous]
enabled = true
org_role = Viewer
hide_version = true
# For production—restrict CORS
[security]
cookie_secure = true
cookie_samesite = none
Service Account Token (recommended)
# Create service account via API
curl -X POST http://grafana:3000/api/serviceaccounts \
-H "Content-Type: application/json" \
-u admin:admin \
-d '{"name":"embed-reader","role":"Viewer","isDisabled":false}'
# Create token
curl -X POST http://grafana:3000/api/serviceaccounts/1/tokens \
-H "Content-Type: application/json" \
-u admin:admin \
-d '{"name":"embed-token"}'
React Component
function GrafanaEmbed({ dashboardId }: { dashboardId: string }) {
const [iframeUrl, setIframeUrl] = useState('');
useEffect(() => {
fetch(`/api/grafana/embed-url?dashboard=${dashboardId}`)
.then(r => r.json())
.then(({ url }) => setIframeUrl(url));
}, [dashboardId]);
return (
<iframe
src={iframeUrl}
style={{ width: '100%', height: 500, border: 'none', borderRadius: 4 }}
allow="cross-origin-isolated"
/>
);
}
Timeline
Basic anonymous embedding—1 day. Token-based auth with parameter passing—2–3 days.