Salesforce Lightning Component – Radar Chart

To create Radar chart in lightning component, we will be using chart.js library. If you are new to lightning then please go through basics and also I would suggest to go through lightning trailhead modules.

Lightning Component for Radar Chart
Lightning Component for Radar Chart

Apex class

 * Author	:	Jitendra Zaa
 * Desc		:	Controller class used to create demo RadarData to be used in Lightning Component
 * */
public class RadarChartData {
    public static String getLeadJSON(){
        List<Lead> lstLead = [SELECT Id, LeadSource FROM Lead limit 100 ];
        Map<String,Integer> mapLeadSource = new Map<String,Integer>();
        for(Lead l : lstLead)
                mapLeadSource.put(l.LeadSource, mapLeadSource.get(l.LeadSource) + 1 ) ;
                mapLeadSource.put(l.LeadSource, 1) ;        
        RadarDataWrapper radarData = new RadarDataWrapper();
        for(String key : mapLeadSource.keySet())
        return System.json.serialize(radarData);
     * Wrapper class to serialize as JSON as return Value
     * */
    class RadarDataWrapper
       public List<String> radarLabels {get;set;}
       public List<Integer> radarData {get;set;}
        public RadarDataWrapper(){
            radarLabels = new List<String>();
            radarData = new List<Integer>();

Annotation @AuraEnabled is used to provide access to lightning components that they can apex methods from Javascript. In above Apex class we have used wrapper class, where we are populating labels for Radar chart and value associated with them and returning JSON string.


<aura:component controller="RadarChartData" implements="force:appHostable">
    <ltng:require scripts="/resource/Chart_js/" afterScriptsLoaded="{!c.init}"/>

<div class="heading">
    	Radar Chart showing Lead count by Source

        <canvas aura:id="radarChart" id="radarCHart123" width="400" height="400"/>


We have specified that this component implements “force:appHostable” means we can create tab for this component and it can be accessed from Salesforce1 mobile navigation. External library “chart.js” is loaded from static resource named “chart_js” with the help of “ltng:require” tag. Once this javascript file is loaded, we are informing lightning framework to execute method “init()” of js controller.


	init : function(component, event, helper) { 

Above Javascript controller simply calls method of javascript helper.


    setupRadarChart : function(component) {
        var action = component.get("c.getLeadJSON");
        action.setCallback(this, function(a){
            var jsonRetVal = JSON.parse(a.getReturnValue()); 
            var radarChartData = {
			labels: jsonRetVal.radarLabels,
			datasets: [
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: jsonRetVal.radarData
        var el = component.find('radarChart').getElement();
        var ctx = el.getContext('2d');
        new Chart(ctx).Radar(radarChartData);   

Apex method is called from javascript helper. Once it is executed and result is returned, we are setting various values from JSON string returned in Radar chart library.


.THIS.heading {
    margin-top : 10px;
    padding-left : 10px;


  1. How can i access reports and dashboards into lightening component.My requirement is to show reports & dashboards into napili template but it is giving error while showing some reports.please tell how to do it or other approaches?

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.