This SharePoint tutorial explains, how to create Highcharts in SharePoint using Rest API. We will see a demo to create a pie chart using Highcharts js libraries in SharePoint Online. We can also use Highcharts in SharePoint Online/2013/2016.
Introduction to Highcharts
Highcharts currently support line, spline, area, area spline, column, bar, pie, scatter, angular gauges, area range, area spline range, column range, bubble, box plot, error bars, funnel, waterfall, and polar chart types.
Create Highcharts in SharePoint using Rest API
Many organizations mostly used high chart and Pie chart to make a dashboard page. Here I will show you step by step to create Highcharts in SharePoint using Rest API.
Before we start, we have to add the jQuery reference file with Highcharts reference file in our SharePoint application.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script>
Step 1: Create a task list in SharePoint with the below column as per the screenshot.
Step 2: Now you can refer to this code to prepare Highcharts in SharePoint. Here simply I call list items using SharePoint REST API and bind all items with high chart control.
Integrate Highcharts in SharePoint Online
Here we will add the code inside a Script editor web part in a web part page in SharePoint Online.
Step-1: Open your SharePoint web part page.
Step-2: Edit the web part page and add the ‘Script Editor’ to the page by following the below instructions (refer to the below screenshot).
Step-3: Click on the ‘Edit Web Part’ option as shown below.
Step-4: Copy and paste the code snippet in the ‘Web Part’ which I have written on top and click on the ‘Insert’ button and save the page.
Step-5: Once you click on OK, Highcharts will appear in the page as per below screenshot.
This is how the charts will appear in the SharePoint Online web part page which we created using Highcharts.
You may like the following SharePoint tutorials:
- Google Pie Chart in SharePoint Online (Step by Step tutorial)
- Working with Chart Web Part in SharePoint 2013 or SharePoint 2010
- SharePoint Online Gantt Chart View for Task List
- Quick Chart Web Part in Modern SharePoint Online Site
- Add Calendar List in the Modern SharePoint Online Site Pages
- How to Change Layout of a Page in SharePoint 2013
- Download SharePoint Manager
- The workbook cannot be opened error in SharePoint 2013
Hope this SharePoint tutorial helps to learn how to create charts using Highcharts in SharePoint Online or SharePoint 2013/2016.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Hi, Awesome work sir, there is just one typo in the code
case “Compleetd”: /*here is typo*/Completed
Thank you so much, it worked like charm.
Done. Modified the code.
hi, if I want to change the color of the pie chart, where should I go? I have downloaded highchart file but don’t know how to change? thank you
[…] Create Highcharts in SharePoint using Rest API […]
Hello, its a very good article. I applied is my organization’s page but chart is not populated. Is Highcharts for sharepoint is free to use for organisation? If not then alternative for that?
I think It is not free, you have to take a license for your organizations.
When I apply this code, the totals do not match what is included in my list. Is there a way to count all items in the list?