Dynamic Dashboards in SPFx with Microsoft Graph and Recharts

Introduction

So far, we’ve used static data. But real dashboards thrive on live business data: Planner tasks, email analytics, OneDrive usage, or training progress. Microsoft Graph makes this possible.

This article shows how to connect Recharts + Graph API in SPFx to build interactive dashboards.

Step 1. Set up Graph Client in SPFx

const client = await this.props.context.msGraphClientFactory.getClient("3");

Step 2. Fetch Data (Example: Planner Tasks)

const response = await client.api("/me/planner/tasks").get();
const data = response.value.map((task: any) => ({
  label: task.title,
  value: task.percentComplete
}));

Step 3. Bind to Chart

<BarChart data={data}>
  <XAxis dataKey="label" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="value" fill="#0078d4" />
</BarChart>

Example 1. Planner Task Status from Microsoft Graph

import * as React from "react";
import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";

export const PlannerChart: React.FC<{ context: any }> = ({ context }) => {
  const [data, setData] = React.useState<any[]>([]);

  React.useEffect(() => {
    (async () => {
      const client = await context.msGraphClientFactory.getClient("3");
      const response = await client.api("/me/planner/tasks").get();

      const mapped = response.value.map((task: any) => ({
        label: task.title,
        value: task.percentComplete,
      }));
      setData(mapped);
    })();
  }, []);

  return (
    <BarChart width={600} height={300} data={data}>
      <XAxis dataKey="label" />
      <YAxis />
      <Tooltip />
      <Bar dataKey="value" fill="#0078d4" />
    </BarChart>
  );
};

✅ Explanation

• Fetches tasks from Planner for logged-in user.

• Shows % complete per task.

Example 2. Email Analytics

const [data, setData] = React.useState<any[]>([]);

React.useEffect(() => {
  (async () => {
    const client = await context.msGraphClientFactory.getClient("3");
    const response = await client
      .api("/me/messages?$select=receivedDateTime")
      .top(50)
      .get();

    // Count emails per day
    const counts: Record<string, number> = {};
    response.value.forEach((msg: any) => {
      const date = new Date(msg.receivedDateTime).toLocaleDateString();
      counts[date] = (counts[date] || 0) + 1;
    });

    const mapped = Object.keys(counts).map((d) => ({
      label: d,
      value: counts[d],
    }));

    setData(mapped);
  })();
}, []);

✅ Explanation

• Displays how many emails the user received per day.

• Great for productivity tracking.

Example 3. OneDrive Usage

const [data, setData] = React.useState<any[]>([]);

React.useEffect(() => {
  (async () => {
    const client = await context.msGraphClientFactory.getClient("3");
    const response = await client.api("/me/drive/root/children").get();

    const counts: Record<string, number> = {};
    response.value.forEach((f: any) => {
      const ext = f.name.split(".").pop();
      counts[ext] = (counts[ext] || 0) + 1;
    });

    const mapped = Object.keys(counts).map((ext) => ({
      label: ext,
      value: counts[ext],
    }));

    setData(mapped);
  })();
}, []);

✅ Explanation

• Group OneDrive files by extension (docx, pdf, xlsx).

• Can be shown in a PieChart or a BarChart.

Why It Matters

SPFx dashboards now show real-time organizational data. A manager sees project status, IT sees storage usage, HR sees training completion — all in one glance.

Conclusion for the Series

• Article 1: Build the foundation with Recharts.

• Article 2: Customizing Recharts in SPFx with Tooltips and Theming

• Article 3: Dynamic Dashboards in SPFx with Microsoft Graph and Recharts

By following this series, you transform SPFx solutions into powerful business intelligence dashboards inside SharePoint.