Charts in Lightning component

In one of the recent Salesforce1 Mobile app project , we need to display charts in lightning components .

I researched some of the available options to accomplish same , and here i  landed with some of the Javascript Charting Libraries .

  • JustGuage (To draw Guage Chart )
  • ChartJS     (To draw rest of the charts )

Here are the few steps to include chart in lightning components .

1. Download resource file and create static resources .

2.a. Include static resource for Guage Chart in lightning components .

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
     <ltng:require scripts="{!join(',', 
                               $Resource.JustGuage   + '/justgage-1.2.2/raphael-2.1.4.min.js', 
                               $Resource.JustGuage   + '/justgage-1.2.2/justgage.js')}"
                      afterScriptsLoaded="{!c.generateGauageChart}" />
    <div class="slds-box">
        <div id="guagechart_mApp" class="200x160px"></div>

3.a. Set Guage data in controller .

    generateGauageChart : function(component, event, helper) {
        //var ctx = component.find("linechart").getElement();
        var g = new JustGage({
            id: 'guagechart_mApp',
            value: 67,
            min: 0,
            max: 100,
            title: "Target"

2.b . Include static resource for Doughnut Chart in lightning components .

<aura:component implements="flexipage:availableForAllPageTypes">
<ltng:require scripts="{!$Resource.ChartJS}" afterScriptsLoaded="{!c.generateFunnelChart}"/>
     <ltng:require scripts="{!join(',', 
                      afterScriptsLoaded="{!c.generateFunnelChart}" />
    <aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>

        .canvas-container-funnel {
        position: relative;
        .funnelChart_App {
        position: absolute;
    <div class="slds-box canvas-container-funnel " >
<canvas aura:id="funnelChart_mAPP" id="funnelChart_App" height="70" width="150"></canvas>
3.b . Set Doughnut Chart data in controller .
    generateFunnelChart : function(component, event, helper) {
        var ctx = component.find("funnelChart_mAPP").getElement();
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["M", "T", "W", "T", "F", "S", "S"],
                datasets: [{
                    backgroundColor: [
                    data: [12, 19, 3, 17, 28, 24, 7]
    doneRendering : function(component, event, helper){
        var iframes = document.getElementsByClassName("chartjs-hidden-iframe");
        if(iframes && iframes.length>0){
            //var iframe = iframes[0];
        // = 'relative';
            document.getElementsByClassName("chartjs-hidden-iframe")[0].style.position = "relative";


  1. I think that I'm into your pieces of writing. They really help me out. I wait for your posts every week. I learn many new interesting things from the articles. The information is essential for me. I want to thank you for sharing.,, Autoketing

  2. The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. jogos friv gratis 2019
    Jogos 2019
    jogos friv

  3. This comment has been removed by the author.


Post a Comment

Popular posts from this blog

A Quick Salesforce OAuth 2.0 Usage Demonstration

Salesforce To Authorize.Net Integration