Lightning component to display chart using Chart.Js

In the following example, we are using Chart.Js plugin to implement Chart in our lightning component. I am using Account and it's related Contact for showing how many contact are related to one account graphically.

Screenshots: -

Apex: -

1.  public class getContact {
2.     @AuraEnabled
3.     public static List<Contact> getContactList(){
4.         List<Contact> con = [SELECT Id, Name, Email, Account.Name FROM Contact];
5.         return con;
6.     }
7. }

Component: -

1. <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="getContact">
2. <!--attributes-->
3.     <ltng:require scripts="{!$Resource.chartNew}" afterScriptsLoaded="{!c.scriptsLoaded}"/> <!--include chart JS plugin from static resource-->
4.     
5.     <aura:handler name="init" value="{!this}" action="{!c.init}" /> <!--init method for getting contacts and accounts
6. and set them into chart-->
7.     
8.     <!--markup-->
9.     <div class="slds-grid">
10.         <div class="slds-col slds-p-around_large">
11.             <canvas aura:id="myChart" class="myChart"></canvas>
12.         </div>
13.     </div>
14. </aura:component>

Controller: -

1. ({
2.     scriptsLoaded : function(component, event, helper) {
3.         //create context to instantiate a pre-defined chart
4.         var ctx = component.find("myChart").getElement();
5.         
6.         var data = {
7.             labels: ["Family", "Friends", "Relative", "Event Organizer", "Home Renovation And Construction"], //name of accounts
8.             datasets: [
9.                 {
10.                     label: 'Number of contacts',
11.                     borderColor: 'rgb(245, 66, 138)',
12.                     backgroundColor: 'rgb(245, 66, 138)',
13.                 },
14.             ]
15.         }
16.         
17.         component.myChart = new Chart(ctx, {
18.             type: 'bar',
19.             data: data,
20.             options: {
21.                 responsive: true,
22.                 plugins: {
23.                     legend: {
24.                         position: 'top',
25.                     }
26.                 },
27.             }
28.         });
29.     },
30.     
31.     init: function(component, event, helper) {
32.         helper.getContactAndAccount(component, event, helper);
33.     },
34. })

Helper: -

1. ({
2. getContactAndAccount : function(component, event, helper) {
3. var action = component.get("c.getContactList");
4.         
5.         action.setCallback(this, function(response){
6.             var state = response.getState();
7.             if(state === "SUCCESS") {
8.                 var contacts = response.getReturnValue();
9.                 console.log('contacts-->', contacts);
10.                 //go to next helper function to assign value to chart
11.                 this.setData(component, event, contacts);
12.             }
13.         });
14.         
15.         $A.enqueueAction(action);
16. },
17.     
18.     setData : function(component, event, contacts) {
19.         if (component.myChart && component.myChart.data && component.myChart.data.datasets[0]) {
20.             var contacts = contacts;
21.             
22.             if (contacts && Array.isArray(contacts)) {
23.                 var map = {};
24.                 
25.                 contacts.forEach(function(contact) {
26.                     map[contact.Account.Name.replace(/ /g, '_')] = (map[contact.Account.Name.replace(/ /g, '_')] || 0) +1;})
27.                 //since in map we can't use name with space separated, so we replace the space with '_'
28.                
29.                 var data = [
30.                     map.Family || 0,
31.                     map.Friends || 0,
32.                     map.Relative || 0,
33.                     map.Event_Organizer || 0,
34.                     map.Home_Renovation_And_Construction || 0
35.                 ];
36.                 //in this example I am putting the account name which I needed to show, If we want we can show all account or can make them dinamically to be came
37.                 
38.                 component.myChart.data.datasets[0].data = data;
39.                 component.myChart.update();
40.             }
41.         }
42.     },
43. })

App: -

<aura:application extends="force:slds" access="GLOBAL">
    <c:ChartDemoComponent />
</aura:application>