Quick Charts In SharePoint Online

In this article, we will have a look at Quick Charts in modern web parts introduced in SharePoint Online.

Quick Charts In SharePoint Online
 
Quick Charts are a new addition to the targeted releases of modern web parts for SharePoint Online. It is a simple and easy-to-use web part to show data in the form of charts. Currently, it supports only two chart options,
  • Column Chart
  • Pie Chart
Along with static data, Quick Charts can also display data from the list. For instance, let us assume we have a list in SharePoint, “Weather List” with the below data.
 
Quick Charts In SharePoint Online
 
Follow these steps to set up the charts.
 

Part I – Creating a Column Chart

  1. Create the list as shown in the screenshot above. Make sure that the list you create has a “Number” type column.
  1. Now, go to any page (modern page). Edit the page and search for the “Quick Chart” web part and add it.

    Quick Charts In SharePoint Online
  1. The previous step will open add the quick chart web part, and you’re ready to customize it. Give it any name and click on the “Edit web part” option (depicted by point 4 below). This will open the Quick Chart configuration menu

    Quick Charts In SharePoint Online
  1. Select the “Column” option from the Chart Type. In the section of Data, select the 2nd option to get the data from a live list on the site. Select the list from the dropdown.

    Quick Charts In SharePoint Online
  1. Now that the list is selected. Its time to select the actual data points. Go ahead and select the appropriate list columns for
    • The column that has the data to display
    • A column with labels for each data point
    • Sort order

      Quick Charts In SharePoint Online
  1. You can make the chart a bit more informative by giving some names to the horizontal and vertical axes as shown below,

    Quick Charts In SharePoint Online
  1. This completes the steps for creating a Column chart in Quick chart. Now save and publish the page to see the changes.

    Quick Charts In SharePoint Online

Part II – Creating a Column Chart

 
To demonstrate both the chart types together, we have broken down the existing web part zone into two sections. Also, for the sake of simplicity, we will be using the same list used in the previous example.
  1. To split the section into to, click on “Edit section” and select “Two Columns” from layout options. Now similar to Step 2 earlier, select “Quick Chart” and add it.

    Quick Charts In SharePoint Online
  1. Select the “Pie chart” option from Chart Type. Next, select the list and appropriate columns as shown below. Exit the web part editing section and re-publish the page. The pie chart will be updated.

    Quick Charts In SharePoint Online
These conclude the steps. Both the charts will be reflected on the page. A screenshot of the same has been shown below.
 
Quick Charts In SharePoint Online
 
A few observations on Quick Chart,
 
Pros
  • Simple and easy to use 2-dimensional chart options in SharePoint that comes out of the box.
  • Charts are responsive. Displays information on mouse hover
Cons
  • The list will need to have a “Number” type column. Otherwise, it will not be identified in the dropdown of list selection in the Quick Chart Configuration menu
  • Limited charts – only column and pie available. Also, no out of the box option for changing color schemes.