Enable Chart Web Part in SharePoint 2013/2016/Online

In this SharePoint tutorial, we will discuss chart web part sharepoint 2013, how to enable chart web part in SharePoint 2013/2016/Online. Also, we will see how to fix SharePoint 2013 chart web part missing issue.

Also, we will see how to create a chart from SharePoint 2013 list, the same steps you can follow to create charts in SharePoint 2016 from SharePoint list.

Chart web part SharePoint 2013

Till SharePoint 2010, Microsoft has provided the chart web part that we can use to create various chats from SharePoint list data.

But Microsoft has removed the chart web part in SharePoint 2013. So chart web part is missing in SharePoint 2013 version and the next versions onwards.

SharePoint 2013 Chart Web Part Missing

Recently we got one requirement for implementing Chart webpart in SharePoint 2013. So I just found the way how I will implement chart web part in SharePoint server 2013.

Here we will see how to enable chart web part in SharePoint 2013 or how to enable chart web part in SharePoint 2016 or how to enable chart web part in SharePoint Online.

There are two ways we can enable SharePoint 2013 missing chat web part.

The below approach I have done in a SharePoint Online site. In the same way, you can also enable chart web part SharePoint 2013.

Open SharePoint Online site (top-level site), then click on the Gear or settings icon, then click on Web parts which are under Web Designer Galleries.

Then click on the Files -> New Document -> New from the ribbon.

Then search for “Microsoft.Office.Server.WebControls.ChartWebPart” and select the item (check the check box).

Then click on the Populate Gallery, it is presented at the top.

Once you populate, you can see it will be available in the page.

You can then open any SharePoint web part page and Edit the page and add a web part, you can see the SharePoint chart web part will be available under the Miscellaneous category.

Read SharePoint Hero Web Part

Enable chart web part SharePoint 2013

There is also another way, we can enable chart web part SharePoint 2013.

So for creating chart web part in sharePoint 2013, we need to follow below steps:

Copy the below code.

<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<type name="Microsoft.Office.Server.WebControls.ChartWebPart, Microsoft.Office.Server.Chart, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
<importErrorMessage>Cannot import Chart Web Part.</importErrorMessage>
</metaData>
<data>
<properties>
<property name="RealTimeInterval" type="int">0</property>
<property name="Height" type="unit" />
<property name="IsCustomized" type="bool">False</property>
<property name="ListUrl" type="string" null="true" />
<property name="AllowConnect" type="bool">True</property>
<property name="CatalogIconImageUrl" type="string" />
<property name="Title" type="string">Chart Web Part</property>
<property name="Hidden" type="bool">False</property>
<property name="ShowDebugInfoRuntime" type="bool">False</property>
<property name="BindToDataDesignMode" type="bool">True</property>
<property name="TitleIconImageUrl" type="string" />
<property name="ChromeState" type="chromestate">Normal</property>
<property name="Description" type="string">Helps you to visualize your data on SharePoint sites and portals.</property>
<property name="ChartXml" type="string">&lt;?xml version="1.0" encoding="utf-16"?&gt;
&lt;Chart BorderColor="26, 59, 105" BorderWidth="1" BorderlineDashStyle="Solid"&gt;
&lt;Series&gt;
&lt;Series Name="Default" ShadowOffset="2" ChartArea="Default" BorderColor="26, 59, 105"&gt;
&lt;/Series&gt;
&lt;/Series&gt;
&lt;ChartAreas&gt;
&lt;ChartArea BackColor="White" ShadowOffset="2" BorderColor="26, 59, 105" BorderDashStyle="Solid" Name="Default"&gt;
&lt;AxisY&gt;
&lt;MajorGrid LineColor="Silver" /&gt;
&lt;MinorGrid LineColor="Silver" /&gt;
&lt;/AxisY&gt;
&lt;AxisX&gt;
&lt;MajorGrid LineColor="Silver" /&gt;
&lt;MinorGrid LineColor="Silver" /&gt;
&lt;/AxisX&gt;
&lt;AxisX2&gt;
&lt;MajorGrid LineColor="Silver" /&gt;
&lt;MinorGrid LineColor="Silver" /&gt;
&lt;/AxisX2&gt;
&lt;AxisY2&gt;
&lt;MajorGrid LineColor="Silver" /&gt;
&lt;MinorGrid LineColor="Silver" /&gt;
&lt;/AxisY2&gt;
&lt;/ChartArea&gt;
&lt;/ChartAreas&gt;
&lt;BorderSkin BackColor="CornflowerBlue" BackSecondaryColor="CornflowerBlue" /&gt;
&lt;/Chart&gt;</property>
<property name="WorkBookUrl" type="string" null="true" />
<property name="AllowMinimize" type="bool">True</property>
<property name="ChromeType" type="chrometype">Default</property>
<property name="AlignDataPointsByAxisLabel" type="bool">False</property>
<property name="AllowZoneChange" type="bool">True</property>
<property name="DataBindingsString" type="string">&lt;?xml version="1.0" encoding="utf-16"?&gt;
&lt;ArrayOfDataBinding xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" /&gt;</property>
<property name="ShowToolbar" type="bool">True</property>
<property name="Width" type="unit" />
<property name="HelpMode" type="helpmode">Navigate</property>
<property name="TitleUrl" type="string" />
<property name="DesignerTemplateId" type="string" />
<property name="HelpUrl" type="string" />
<property name="ExportMode" type="exportmode">All</property>
<property name="ConnectionPointEnabled" type="bool">True</property>
<property name="AllowClose" type="bool">True</property>
<property name="AllowEdit" type="bool">True</property>
<property name="Direction" type="direction">NotSet</property>
<property name="AllowHide" type="bool">True</property>
<property name="DesignerChartTheme" type="Microsoft.Office.Server.Internal.Charting.Utilities.ChartTheme, Microsoft.Office.Server.Chart, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c">BrightPastel</property>
</properties>
</data>
</webPart>
</webParts>

Save the above code as a “Chart.Webpart” file. It’s exported from SharePoint 2010.

Now upload this webpart file to web part gallery.

• Go to Site Settings – Click on the “Web Parts” link under the “Web Designer Galleries” section.
• On the “Files” tab, click on “Upload Document”
• Select the “Chart.webpart” file and specify web part attributes.

After this the chart web part will be available to use in SharePoint 2013.

Add chart web part to SharePoint 2013 page

Once you Save, the chart web part in SharePoint 2013 will be available to use.

Edit the web part page in the SharePoint site and click on Add a web part, you can see the web part will be visible in the Default web parts category.

Now configure the Configure Data connections and other properties of the chart,

Finally here is the output:

You can Select the Data & Appearance and Advanced Properties for configuration.

You can also able to do Custom design after editing the web part.

Enable Chart web part in SharePoint 2013 (Another Approach)

You can also follow the below steps to enable chart web part in SharePoint 2013 or even you can enable chart web part in SharePoint 2016 or SharePoint 2019.

But still, you can add the chart web part in SharePoint 2013. Follow the below steps.

Step-1:
Download this file and then unzip it.

Step-2:
Edit the page and then go to the INSERT tab and then there click on Web Part. Then click on Upload a Web Part and then browser the file that we have unzipped in Step-1 and click on Upload as shown in the fig below:

Step-3:
Then the Chat web part will come in the web part list, select the web part and click on OK. It will appear on the page as shown in the fig below:

I hope it will be helpful to you to enable and use the chart web part in SharePoint 2013.

SharePoint 2013 chart from list

Now, let us see how to create a chart from list in SharePoint 2013. The same steps you can follow to create charts in SharePoint 2016 from a list.

Here I have a SharePoint list name as “Course” which has 5 columns and the data are like below:

Here I want to show a chart (bar) and want to see in Sharepoint 2013 how many trained, novice, intermediate and expert people. Similarly for SharePoint 2010, Asp.net and C#.Net skills.

For this first add a chart web part to the page (Edit Page -> INSERT -> Web Part). Once you will put the chart it will appear like below. Save the page.

After that click on Data & Appearance. Then select Connect Chart To Data as shown in the fig below:

In the next step select “Connect to a List” in the Choose a Data Source section. Then click on Next.

In the next step select the SharePoint 2013 site and the list in the drop down.

In the next step, it will show you the list and the data. Click Next.

The 4th Step Bind Chart to Data is an important step. Follow below instruction. Here

In the Series expand (click on +) Series Properties. Enter the name, here I am putting based on my column names. It should be like below:

• Series Name: Trained
• Series Type: StackedColumn (From the drop-down select the column).
• Y Field: Trained (Select Trained Column from the drop down)
• X Field: Title (Remember this will be the same for all series)

So it will appear like below:

Then click on the + icon near-series like below:

Here also fill the series details like below:

• Series Name: Novice
• Series Type: StackedColumn (From the drop-down select the column).
• Y Field: Novice (Select Novice Column from drop down)
• X Field: Title (Remember this will be the same for all series).

So it will appear like below:

Add all based on the columns. Here I added 4 for each column (Trained, Novice, Intermediate and Expert).

Then click on Finish.

Now your chat will appear like below:

If you want to customize a bit like you want to show the count, as well as an image in the top right corner, follow below steps.

Here click on Data & Appearance, then click on Customize your chat.

Here select Stacked Column and click Next as shown in the fig below:

You can set the width and Height of the chart web part. then click on Next.

The next step is very important, if you want to Show Legend then you chose Show Legend.

You can go to the Axis and Gridlines tab and if you do not want the Major Gridlines then you can deselect “Show Major Grid Lines” for both X and Y-axis.

If you want to show the Labels then you can select the Label and click on Finish.

Finally, your chart will appear like below:

SharePoint charting web part free

You will not get many free SharePoint chart web parts over the internet if you want to use them at the enterprise level. But you can still download Free Google Chart SharePoint Web Part from Amrein Engineering. The SharePoint chart web part allows making charts from the SharePoint list. And the charts are created using Google chart api.

They also have a pro version available. The chart web part supports all SharePoint on-premise versions like SharePoint 2013, SharePoint 2016, and SharePoint 2019.

You may like following SharePoint tutorials:

• Create an organization chart from a list in SharePoint Online/2013/2016 using JavaScript
• Create Highcharts in SharePoint using Rest API
• Google Pie Chart in SharePoint Online (Step by Step tutorial)
• SharePoint list templates
• SharePoint Online Image Slider or Carousel Example
• Get sharepoint site template PowerShell
• Save site as template in SharePoint 2013

In this tutorial, we learned chart web part sharepoint 2013 and how to enable chart web Part in SharePoint 2013/2016/Online. Also, we fixed SharePoint 2013 chart web part missing issue.

Tags: enable chart web part sharepoint 2013, enable chart web part sharepoint 2016, enable chart web part in sharepoint online, sharepoint 2013 chart web part download, sharepoint 2016 chart web part missing, sharepoint 2013 chart web part download, how to create chart webpart in sharepoint 2013, sharepoint 2013 chart web part missing, sharepoint chart web part download, sharepoint chart web part missing, sharepoint online chart web part, sharepoint online chart web part missing, sharepoint 2016 chart from list, sharepoint 2019 chart from list