Create a chart using chart.js in SharePoint Server 2013/2016

This SharePoint 2013 tutorial, we will discuss how to create a custom chart in SharePoint server 2013.

We can use Chart.js to create various attractive charts using JavaScript in SharePoint Online or SharePoint 2013/2016.

Open the SharePoint site. Create a simple custom list named “Products”. Create some custom columns into it.

  • Title (By default): Single line of text
  • Product: Single line of text
  • Year: Number
  • Sale Percentage: Number

Create a chart using chart.js in SharePoint Server 2013/2016

Now the created SharePoint list looks like the below screen.

Download Chart.min.js. And upload it into the Site Assets library in SharePoint 2013/2016.

SharePoint online create chart using chart js

Now open SharePoint designer 2013 and create a simple HTML file and add some JSOM work to get the results and display the HTML file using CEWP(Content Editor Web Part).

Create a chart using chart.js In sharepoint 2013
<script src="…/…../SiteAssets/chart.min.js" type="text/javascript"></script>
<script type="text/javascript">
SP.SOD.executeOrDelayUntilScriptLoaded(pie, 'sp.js');
var collListItem; //ListItems
var chartX = []; //X-Axis Labels
var chartY = []; //Y-Axis Values
function pie() {
var clientContext = new SP.ClientContext('/sites/dev/');
var oList = clientContext.get_web().get_lists().getByTitle('Product');
var camlQuery = new SP.CamlQuery();
this.collListItem = oList.getItems(camlQuery);
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)

function onQuerySucceeded() {
console.log("pie success");
var listItemEnumerator = collListItem.getEnumerator();
//Create Points from ListData
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();

//Load Chart JS
//Generate Data
var Piedata = {
labels: this.chartX,
datasets: [
percentageInnerCutout: 100,
data: this.chartY,
backgroundColor: [
borderWidth: 0,
hoverBackgroundColor: [

//Display Chart
var ctxpie = document.getElementById('pie');
var myNewpie = new Chart(ctxpie, { type: 'pie', data: Piedata, options: { legend: { display: false } } });

function onQueryFailed() {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
<h3>Sharepoint server 2013 Sales report by year basis</h3>

<canvas id="pie" width="100″ height="30″></canvas>

Note: you can also create doughnut and bar charts by changing the type: pie

Here is the Final result:

Create a chart using chart.js in SharePoint

You may like following SharePoint chart tutorials:

Hope this SharePoint tutorial helps to create a chart using chart.js in SharePoint Server 2013/2016.