Interactive Visuals in Power BI

Overview

In this tutorial you’ll learn how to create interactive visuals that respond to user actions such as clicks, slicers, and drill‑throughs. We’ll cover:

• Using bookmarks to snap to specific states.
• Syncing slicers across pages.
• Embedding custom visuals with the Power BI JavaScript API.

Prerequisites

• Power BI Desktop (latest version)
• Basic knowledge of DAX and Power Query
• An Azure AD tenant (for embedding)

Step‑by‑Step Guide

1. Create a Bookmark

Bookmarks capture the current state of a report page.

// Power BI Desktop
1. Configure your visual.
2. Go to View → Bookmarks Pane.
3. Click "Add" and name it "Default".

2. Add a Sync Slicer

Sync slicers let users filter data across multiple pages.

// Power BI Desktop
1. Insert a slicer for "Region".
2. In the Visualizations pane, click "View > Sync slicers".
3. Check the pages where the slicer should apply.

3. Embed a Custom Visual with JavaScript

Use the Power BI JavaScript SDK to embed a report and enable interaction.

// Load the Power BI client
import * as pbi from "powerbi-client";

const models = pbi.models;
const embedConfig = {
    type: "report",
    id: "YOUR_REPORT_ID",
    embedUrl: "https://app.powerbi.com/reportEmbed?reportId=YOUR_REPORT_ID",
    accessToken: "YOUR_EMBED_TOKEN",
    tokenType: models.TokenType.Embed,
    settings: {
        panes: { filters: { visible: false } },
        navContentPaneEnabled: false
    }
};

const reportContainer = document.getElementById("reportContainer");
const powerbi = new pbi.service.Service(
    pbi.factories.hpmFactory,
    pbi.factories.wpmpFactory,
    pbi.factories.routerFactory
);

powerbi.embed(reportContainer, embedConfig);

Live Demo

(Demo requires a valid embed token – replace placeholders in the code above.)