In this post, we will see how we can represent SharePoint data in graphical form. Now, Create a custom SharePoint list ‘TaskDetails’ with the below details.
Column Name Type
Title     Single line
status  Choice

Add list items into ‘TaskDetails’.

Then add the below HTML elements on the page. <div>

Add reference for jQuery and ChartJS plugin.

Code for getting SharePoint ‘TaskDetails’ list data using Rest API.


Convert data into chartJS dataset and load the chart.


And this is the output:


The integrated code will be as below.

Refer to the attached resources for more.