Create Highcharts in SharePoint using Rest API

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 is a JavaScript library that we can use to build beautiful, and high-quality web-based charting with minimal coding. Professional and attractive charts can be made using High charts for a web application or website.

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your website or web application.

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.

Create Highcharts in SharePoint
Create Highcharts in SharePoint

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.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
var webURL="Site URL"
$(document).ready(function () {
GetProjectType();
});
   var CountCompleted=0;
   var CountNotStarted=0;
   var CountInProgress=0;
   var getData=[]; 

function GetProjectType() {
   
      var deffer = new $.Deferred();
        $.ajax({
           url: webURL + "/_api/web/lists/GetByTitle('List Name')/items?$select=Status",
            type: "GET",
            headers: { "Accept": "application/json;odata=verbose" } 
			// return data format			 		
			
             }).done(function (getStatusType) {
			 
			 $.each(getStatusType.d.results, function(index, item) {
			 
			 switch(item.Status) {

				case "In Progress":
				CountInProgress++			   
				break;

				case "Not Started":
				CountNotStarted++				
				break;

				case "Completed":
				CountCompleted++			
				break;			
			}
			 });     
                  	callGraph();				 
                deffer.resolve();					 
                return deffer.promise();                  
            });              
        }	
	function callGraph()
	{
	     $('#myChartDiv').highcharts({
        chart: {
            type: 'pie'
        },        
        title: {
		  text: 'Project Status',
		  align: 'center'
		},
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
        
        series: [{
        name: 'Project Type',
        colorByPoint: true,
        data: [{
            name: 'Completed',
            y: CountCompleted,
			url: '#'
           
        }, {
            name: 'In Progress',
            y: CountInProgress,
			url: '#'
        }, {
            name: 'Not Started',
            y: CountNotStarted,
			url: '#'
        }]
    }]
    });
	}	
	</script>
	
	<div class="chart"  id="myChartDiv" style="height: 400px; position: relative; cursor: pointer;" ></div>

Integrate Highcharts in SharePoint Online

Once we have the code ready, we can add the JavaScript code inside a content editor web part or a script editor web part in SharePoint Online or SharePoint 2013/2016.

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.

google pie chart sharepoint Online
Script Editor Web part in SharePoint online

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).

Create Highcharts in SharePoint
Script Editor Web part SharePoint online

Step-3: Click on the ‘Edit Web Part’ option as shown below.

Create Highcharts in SharePoint using Rest API
Script Editor Web parts SharePoint online

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.

Create Highcharts in SharePoint using Rest API
Create Highcharts in SharePoint using Rest API

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:

Hope this SharePoint tutorial helps to learn how to create charts using Highcharts in SharePoint Online or SharePoint 2013/2016.

  • Hi, Awesome work sir, there is just one typo in the code
    switch(item.Status) {

    case “Compleetd”: /*here is typo*/Completed
    CountCompleted++
    break;

    Thank you so much, it worked like charm.
    best

  • 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

  • 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?

  • 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?

  • >