Lightning Chart.js example

In this blog, I am going to show how to use the Chart.js in the lightning component with different types of charts. Using chart.js easy to get started. All that’s required is the script included in your page along with a single  node to render the chart.

Step 1: Add Chart.js to the static resource

Go to this link  and download the latest version of chart.js and upload the static resource

Step 2: Apex Class

Here is the simple apex class which I created to get the aggregate data from the Task__c custom object.

 

Step 3: Lightning Component Pie chart

Here is the simple lightning component that shows the task by status as a pie chart. I am loading the chart.js libraries by using ltng:require and using afterScriptsLoaded method to fetch controller logic

 

Bar Chart 

Bar charts are created by setting type to bar

 

Polar area chart

A polar area chart is created by setting typepolarArea. Polar area charts are closely related to pie charts, with the difference that in addition to the angles representing the relative size of the data points, the radius of each element is set in relation to its value.

 

Doughnut chart

Doughnut charts are created by setting type to doughnut.