Getting Started with Recharts in SPFx

Charts are powerful storytelling tools. In SharePoint Framework (SPFx) solutions, developers often need to transform raw business data into clear, visual insights. While Recharts provides easy-to-use chart components, the default visuals often fall short in a polished intranet environment.

This article will show how to:

• Customize Recharts tooltips to display meaningful details.

• Apply SharePoint theme colors for consistency.

• Build scenarios that go beyond simple numbers, such as displaying user lists or status breakdowns.

By the end, you’ll be able to create enterprise-ready charts that feel native inside SharePoint.

Introduction

When building modern SharePoint solutions, presenting raw data in tables isn’t enough. Users want visual insights they can act on. Recharts, a React charting library, integrates beautifully into SPFx projects, allowing developers to build interactive dashboards.

This first article in the series introduces Recharts inside SPFx, from setup to creating your first chart.

Step 1. Installing Recharts

npm install recharts

Step 2. Creating a Simple Chart in SPFx

import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend } from "recharts";

const data = [
  { name: "Jan", tasks: 5 },
  { name: "Feb", tasks: 8 },
  { name: "Mar", tasks: 12 }
];

export const TaskChart = () => (
  <BarChart width={400} height={300} data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Bar dataKey="tasks" fill="#0078d4" />
  </BarChart>
);

Example 1. Monthly Tasks

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

const taskData = [
  { name: "Jan", tasks: 5 },
  { name: "Feb", tasks: 8 },
  { name: "Mar", tasks: 12 },
];

export const MonthlyTasks: React.FC = () => {
  return (
    <BarChart width={500} height={300} data={taskData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="tasks" fill="#0078d4" />
    </BarChart>
  );
};

Explanation

• Each bar represents tasks completed in a month.

• Tooltip shows value on hover.

• Good for managers to see workload trends.

Example 2. Department Workload

const deptData = [
  { name: "HR", tasks: 20 },
  { name: "IT", tasks: 15 },
  { name: "Finance", tasks: 10 },
];

export const DepartmentWorkload: React.FC = () => {
  return (
    <BarChart width={500} height={300} data={deptData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="tasks" fill="#28a745" />
    </BarChart>
  );
};

Explanation

• Compares workload across departments.

• Colors can be customized to match SharePoint themes.

Now each bar shows the workload by department.

Why It Matters

Even with a basic chart, patterns emerge: Which month is busiest? Which department carries more load?