Customizing Recharts in SPFx with Tooltips and Theming

Introduction

Out-of-the-box charts are useful, but enterprise dashboards need context and branding. Imagine showing not just "5 tasks completed", but who completed them. And the colors? They should match SharePoint’s theme, not look out of place.

This article explores custom tooltips and dynamic theming in SPFx.

Step 1. The Problem with Default Tooltips

By default, Recharts tooltips look like this:

Label: Completed
Value: 5

For business scenarios, this isn’t enough. Imagine showing task completion data — users want to know who has completed the tasks, not just the number.

Step 2. Adding a Custom Tooltip

Here’s a custom tooltip that lists users inside each bar:

<ReTooltip
  content={({ active, payload }) => {
    if (!active || !payload?.length) return null;
    const item = payload[0].payload;
    return (
      <div style={{
        background: "#fff",
        padding: "10px",
        borderRadius: "8px",
        boxShadow: "0 6px 18px rgba(0,0,0,0.15)"
      }}>
        <strong>{item.label}</strong>
        <p>{item.value} user{item.value !== 1 ? "s" : ""}</p>
        {item.users.length > 0 ? (
          item.users.map((u: string, i: number) => <div key={i}>• {u}</div>)
        ) : (
          <div>No users</div>
        )}
      </div>
    );
  }}
/>

What’s happening here?

• We use payload from Recharts to extract the hovered data.

• Instead of raw numbers, we render HTML inside the tooltip (styled div).

• We list users associated with that bar (business context).

Step 3. Applying SharePoint Theming

One key requirement in enterprise SPFx projects is theme alignment. Using Fluent UI’s useTheme(), you can dynamically pick colors:

const theme = useTheme();

<Cell
  fill={entry.label === "Completed" ? theme.palette.green : theme.palette.red}
/>

Now, the bars automatically follow the SharePoint theme (e.g., dark mode, corporate branding).

Example 1. Task Completion with User Details

import * as React from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Cell,
} from "recharts";
import { useTheme } from "@fluentui/react";

const completionData = [
  { label: "Completed", value: 5, users: ["Alice", "Bob"] },
  { label: "Pending", value: 3, users: ["Charlie", "Diana"] },
];

export const TaskCompletion: React.FC = () => {
  const theme = useTheme();

  return (
    <BarChart width={500} height={300} data={completionData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="label" />
      <YAxis />
      <Tooltip
        content={({ active, payload }) => {
          if (!active || !payload?.length) return null;
          const item = payload[0].payload;
          return (
            <div
              style={{
                background: "#fff",
                padding: "10px",
                border: "1px solid #ccc",
                borderRadius: "8px",
              }}
            >
              <strong>{item.label}</strong>
              <p>{item.value} users</p>
              {item.users.length > 0 ? (
                item.users.map((u: string, i: number) => (
                  <div key={i}>• {u}</div>
                ))
              ) : (
                <em>No users</em>
              )}
            </div>
          );
        }}
      />
      <Bar dataKey="value" name="Users">
        {completionData.map((entry, index) => (
          <Cell
            key={index}
            fill={
              entry.label === "Completed"
                ? theme.palette.green
                : theme.palette.red
            }
          />
        ))}
      </Bar>
    </BarChart>
  );
};

Explanation

• Tooltip now lists which users are in Completed vs Pending.

• Uses Fluent UI theme colors (green/red).

• Makes charts meaningful for team leaders.

Example 2. Document Review Status

const reviewData = [
   { label: "Approved", value: 7, users: ["Alex", "Sara"] },
   { label: "Rejected", value: 2, users: ["James"] },
   { label: "Pending", value: 5, users: ["Maya", "Liam", "Zara"] },
];

✅ With the same component logic above, the tooltip shows reviewer names.

Example 3. Training Completion

const trainingData = [
   { label: "Completed", value: 10, users: ["Raj", "Neha", "Ankit"] },
   { label: "In Progress", value: 4, users: ["John", "Emily"] },
   { label: "Not Started", value: 6, users: [] },
];

✅ Tooltip helps HR track individual employee progress.

Why It Matters

Instead of bland charts, users get actionable insights and a seamless intranet experience.