Chart Web Part in SharePoint 2010

What is a Chart Web Part?

SharePoint is web-based collaboration platform. On a SharePoint web page, you can add Web Parts which are customizable web page elements. A Chart Web Part, as the name suggests, is a Web Part that contains a chart. It enables user to visualize numerical data and get business insights such as trends at a glance. And the good news is, adding a Chart Web Part on a SharePoint 2010 site is as easy as a few clicks.

Why should you use a Chart Web Part?

We often heard people say “A picture is worth a thousand words”. With myriads of data collected from business activities, it’s hard to figure out what is really going on by looking at the endless tables and lists. Charts, well designed and configured, can tremendously help you better understand your business and make smarter business decisions.

Where can the Chart Web Part draw data from?

In SharePoint 2010, there are four data sources that can be used with the Chart Web Part:

  1. Another Web Part. Chart Web Part can be connected to another Web Part and display the data stored in there as long as the other Web Part is able to send data.
  2. A SharePoint List. Chart Web Part can be connected to a SharePoint List if it is in the same site collection. (The instructions below show the steps of adding a web part using a SharePoint List.)
  3. A Business Connectivity component. Chart Web Part can display external business data by connecting to a Business Connectivity Services (BCS) component.
  4. An Excel Services file. If the data you need to display is stored in an Excel workbook, you can first publish the file to the SharePoint site using Excel Services, and then connect it to the Chart Web Part.

What are the available chart types?

SharePoint 2010 Chart Web Part offers a variety of types of charts according to your business needs. Here’s a list of 10 of the many chart types that you can choose when adding a Chart Web Part:

  1. Bar Chart— Shows comparisons among categories:

  1. Area Chart—Shows cumulated totals and very often the trends over time:

  1. Line Chart—Shows a series of data points connected by straight line segments, usually over time:

  1. Point/ Bubble chart—Shows data in 3 dimensions with dots plotted on 2 axis and dot size being the third dimension:

  1. Financial chart— Shows financial information such as stock price and trading volumes:

  1. Pie chart— Shows the percentage of each section, compared to the entire pie as a whole:

  1. Radar chart — Shows comparison of data in multiple dimensions all at once:


  1. Gantt chart – Commonly used to show project phases and activities:

  1. BoxPlot Chart—shows data through their five-number summaries (minimum value, lower quartile, median, upper quartile and maximum value):

  1. Funnel Chart—Shows values that progressively decrease in proportions:



How to create Chart Web Part in SharePoint 2010?

In our demo, we will show you step by step how to create a Chart Web Part and how to connect it to a SharePoint list so the date from the list is displayed:

Step 1: Click on the site where you want to add a Chart Web Part (in our demo it’s the site called SharePoint). Click on Site Actions:

Step 2: From the list of Site Pages, click on the one in which you want to Add the Chart Web Part:



Step 3: Click on Page, from the Ribbon, click Edit to edit the page:

Step 4: In the Editing Tools, click Insert, click Web Part. In the categories menu, click Business Data, in the Web Parts list, click Chart Web Part, and then click on Add


Step 5: The following graph shows that the Chart Web Part is added, you can click Data & Appearance to configure the Chart Web Part:

Step 6: You’ll see the following 2 options, Customize Your Chart & Connect Chart to Data, click on Connect Chart to Data:



Step 7: This step shows you the four options of data sources: Another Web Part, a List, Business Data Catalog or Excel Services. In our demo, we will choose connect to a List:

Step 8: From the drop down list, choose the site where the list is located:


Step 9: From the drop down list, choose the list you want to connect to, in our case, we will choose (Root) as the site and Revenue by State as the List and then click Next:

Step 10: Select the values from the list that you want to use in the Chart Web Part:

Step 11: This is the last of the four steps in the Data Connection Wizard. In our demo, we will only configure the X and Y field. Click Finish:

Step 12: Now on our SharePoint homepage, the Chart Web Part is connected to the list Revenue by State

Step 13 (Optional): We can go to the specific List that the Chart Web Part is connected to and edit the data or add new data sets; we’ve edited the value of Ohio and add the revenue value of Arizona:


Notice that any changes we make to the List are reflected on the Chart Web Part when we refresh it:

Great job! You’ve just created a Chart Web Part and successfully connected it to a List as the data source!



March 12, 2013


Email [email protected] with any questions you have pertaining to this course.

New CPE Accredited Courses Now Available for Dynamics AX, GP, and NAVEARN CREDITS TODAY