Article that combines the use of Recharts for data visualization with SharePoint lists as a data source. This will demonstrate how to fetch data from a SharePoint list and visualize it using Recharts in a React application built with SPFx (SharePoint Framework).

Visualizing SharePoint List Data with Recharts in SPFx

Introduction

Visualizing data is a crucial part of data analysis and reporting. In the SharePoint ecosystem, many organizations store their data in SharePoint lists. This article will guide you through the process of retrieving data from a SharePoint list and visualizing it using Recharts, a popular React charting library. By the end of this tutorial, you’ll have a functional example of a bar chart displaying data from your SharePoint list.

Prerequisites

Before we dive in, make sure you have the following:

• Basic knowledge of React and SPFx.
• An SPFx project set up.
• Access to a SharePoint list with some sample data.

1. Setting Up Your SPFx Project

If you haven’t already set up an SPFx project, you can do so by running the following commands in your command line:

npm install -g @microsoft/generator-sharepoint
yo @microsoft/sharepoint

Follow the prompts to create your project. Choose React as the framework during the setup.

2. Installing Recharts

Once your project is set up, navigate to your project folder and install Recharts:

npm i recharts@2.12.7

3. Creating the Chart Component

Now, let’s create a React component that will fetch data from a SharePoint list and display it in a chart.

Create a new file named MyChart.tsx in the src/components directory of your SPFx project and add the following code:

import * as React from 'react';
import { useEffect, useState } from 'react';
import { SPFI } from '@pnp/sp';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

export interface IMyChartProps {
  sp: SPFI;
}

const MyChart: React.FC<IMyChartProps> = ({ sp }) => {
  const [data, setData] = useState<any[]>([]);

  // Function to load data from the SharePoint list
  const loadData = async () => {
    try {
      const items = await sp.web.lists.getByTitle("YourListTitle").items.get();
      const chartData = items.map((item: any) => ({
        name: item.Title, // Replace Title with the field you want to visualize
        value: item.YourValueField // Replace YourValueField with the numeric field
      }));
      setData(chartData);
    } catch (error) {
      console.error("Error loading data:", error);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <div>
      <h2>My SharePoint List Data</h2>
      <BarChart width={600} height={300} data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="value" fill="#8884d8" />
      </BarChart>
    </div>
  );
};

export default MyChart;

4. Integrating the Chart Component in Your Web Part

Now that you have your chart component, you need to integrate it into your SPFx web part. Open the MyWebPart.tsx file in the src/webparts/myWebPart directory and modify it as follows:

import * as React from 'react';
import { MyChart } from './components/MyChart';
import { SPFI } from '@pnp/sp';
import { getSP } from './pnpjsConfig'; // Ensure you have this function to get SP context

export interface IMyWebPartProps {
  description: string;
}

const MyWebPart: React.FC<IMyWebPartProps> = (props) => {
  const sp: SPFI = getSP(); // Retrieve SP context

  return (
    <div>
      <h1>{props.description}</h1>
      <MyChart sp={sp} />
    </div>
  );
};

export default MyWebPart;

5. Testing Your Web Part

Run your SPFx project using:

gulp serve

Open your SharePoint site, add the web part you just created to a page, and you should see a bar chart visualizing data from your SharePoint list.

Conclusion

In this article, we demonstrated how to integrate Recharts into an SPFx web part to visualize data from a SharePoint list. By leveraging the power of Recharts, you can create interactive and responsive charts that enhance the user experience and provide valuable insights into your data.

Further Reading

• Recharts Documentation
• SharePoint Framework Documentation
• PnPjs Documentation