Quick chart web part in SharePoint Online

I will show you how to add a quick chart web part in SharePoint Online in this SharePoint tutorial.

Moreover, I will show you how to add pie charts and column charts to a SharePoint site page by using the quick chart web part. Where it represents data in charts and displays statistics and different reports effectively.

Through this web part, we can manually enter the data to create charts automatically or connect it to a SharePoint list/library from where it can retrieve the data to create charts.

Note:

Quick chart web part is only present on the Modern SharePoint page, it’s not available on the SharePoint Classic site.

To achieve it follow the below steps:

Add quick chart web parts in SharePoint Online

Here we will see how to add the quick chart web part to the SharePoint Online site page.

• Open your SharePoint Online site page.
• Then click on the +(Add a new web part in column one).

• Under Data Analysis, choose the Quick chart web part. Now we can see that the SharePoint Online Quick chart web part is added automatically, as shown below:

This is how to add a Quick chart Web Part in SharePoint Online.

SharePoint Online Quick Chart Web Part Configuration

Now we will modify the SharePoint Online quick chart web part by adding a column chart and pie chart.

Add a column chart in a SharePoint online quick chart web part

Let us now see how to configure the quick chart web part to display a column chart in SharePoint Online.

Here, we will add the data manually, and when we are adding data manually, we can enter up to 12 data points.

• Click on the edit icon (Edit web part) as shown below:

• A dialogue box appears on the right-hand side as a Quick chart; here we can:
  • Choose a Chart type as a Column chart (Use a column chart to show data changes over time or comparisons among items. Categories are typically shown along the horizontal axis and values along the vertical axis)
  • We can choose data from:
    • Enter Data: Here, we can enter the data manually -> Choose it.
    • Get data from a list or library on this site: Here, you can choose the data from a list or library.

• Now provide the data manually based on your requirement. I will provide the 3 data labels as 2021, 2022, and 2023 -> Now, based on the year, the profit was:
  • 2021: 60750$ profit.
  • 2022: 78975$ profit.
  • 2023: 58983$ profit.
• In the Data label, we can give a Year -> Next, enter the Value, and provide the profit value based on the year as shown below:

• Now on the Label, provide the:
  • Horizontal axis: Provide the name to the data labels as YEAR.
  • Vertical axis: Provide a name to a value as PROFIT.

“Here label name character limit is 40.“

• Now we can see the column chart in a quick chart web part by adding data manually in SharePoint Online.

Add a pie chart in a SharePoint online quick chart web part

Follow the below steps to add a pie chart.

“Here I will show you how to connect data from the SharePoint list, and when we are connecting a list, I can show up to 50 data points “

Now I will connect the SharePoint online list (Product Transaction details), which has columns like:

1. Product ID (Title)
2. Product Cost (Number)

Now based on that columns, we will create a pie chart in SharePoint online quick chart web part:

• Add a quick chart web part, Click on the edit icon (Edit web part).
• A dialogue box appears on the right-hand side as a Quick chart, here we can:
  • Choose a Chart type as a Pie chart (Use a pie chart to show percentages of a whole. Best when used with fewer than seven categories)
  • We can choose data from:
    • Enter Data: Here, we can enter the data manually.
    • Get data from a list or library on this site: Here, you can choose the data from a list or library-> Choose it.

• List or library with a number column: Choose a SharePoint list to display the data here.
• Column that has the data to display: Choose a column, from your SharePoint list, based on the way, you need to display the chart.
• Horizontal (category) axis labels: Provide another column to be displayed.

• Now we can see the pie chart which is connected to a SharePoint online list in a quick chart web part.

Connect a SharePoint document library to the quick chart web part in SharePoint Online

Here, we will discuss, how to display data in the column chart by selecting the document library from the present SharePoint site in the Quick Chart web part.

“When we are connecting a document library to a quick chart web part in SharePoint, I can show up to 50 data points in it”

Now I will connect the SharePoint document library (Company Certificates), which has a different file of certificates related to the company. So based on that files, I have columns like:

1. Name (Title)
2. If Valid years (Number)

Now based on that columns, we will create a column chart in SharePoint online quick chart web part:

• Add a quick chart web part, Click on the edit icon (Edit web part).
• A dialogue box appears on the right-hand:
  • Choose a Chart type as a Column chart (Use a column chart to show data changes over time or comparisons among items. Categories are typically shown along the horizontal axis and values along the vertical axis)
  • We can choose data from:
    • Enter Data: Here, we can enter the data manually.
    • Get data from a list or library on this site: Here, you can choose data from a list or library-> Choose it.

• List or library with a number column: Here choose a SharePoint document library to display the data.
• Column that has the data to display: Choose a column, from your SharePoint document library, based on the way, you need to display the chart.
• Horizontal (category) axis labels: Provide another column to be displayed.

• Also, you can sort the order in ascending or descending, and also based on ascending label or descending label.
• Now on the Label, provide the:
  • Horizontal axis: Provide the name to the data labels as CERTIFIED NAME.
  • Vertical axis: Provide a name to a value as VALID YEARS.

“Here label name character limit is 40“

• Now we can see the column chart connected to a SharePoint online document library in a quick chart web part.

Conclusion

Here, I have shown you how to add a quick chart web part to SharePoint online site page by adding pie charts and column chart to it.

Moreover, I have explained two ways to create a chart: manually adding data and connecting a SharePoint list and document library to a quick chart web part on the SharePoint site page.

You may also like:

• Group Calendar Web Part in SharePoint Online
• Site Activity Web Part in SharePoint Online
• Document Library Web Part in SharePoint Online
• Planner Web Part in SharePoint Online