Standard Report charts in Lightning component Salesforce

Create summary report using standard Report tab. For this example, I have created a simple report which groups ContactUS__c by City__c.

Apex code snippet :

public class ChartOnContactUS {
    @AuraEnabled
    public static List<Report> getDynamicReport(){
        return [SELECT Id,Name FROM Report];
    }
    @AuraEnabled
    public static String getreport(String reportId){
        Report reportRec = [SELECT Id FROM Report WHERE Id =:reportId];
        Reports.ReportResults reportResult = Reports.ReportManager.runReport(reportRec.Id, true);
        system.debug(JSON.serialize(reportResult));
        return JSON.serialize(reportResult);
    }
}

ChartComponent.cmp

<aura:component controller="ChartOnContactUS" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <ltng:require scripts="{!$Resource.ChartJs}"  afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    <aura:attribute name="ready" type="Boolean" default="false"/>
    <aura:attribute name="countryName" type="String" default="00O0Y000007eZRnUAM"/>
    <aura:attribute name="report" type="sobject"/>
    <div class="slds-grid slds-p-top_small">
                <div class="slds-size_4-of-12 slds-p-left_xx-small slds-p-horizontal_x-large ">
                    <lightning:select label="Report Name" value="{!v.countryName}"  onchange="{!c.cmdCountryEvt}">>
                        <aura:iteration items="{!v.report}" var="reportValue">
                            <option value="{!reportValue.Id}">{!reportValue.Name}</option>
                        </aura:iteration>
                    </lightning:select>
                </div>
            </div>
    <div class="slds-grid slds-wrap slds-grid--pull-padded ">
        <div class="slds-p-horizontal--small slds-size--1-of-3 slds-m-top--medium">
            <canvas aura:id="chart" height="200" width="200"></canvas>
        </div>
    </div>
</aura:component>

ChartComponentController.js

({
    afterScriptsLoaded : function(component, event, helper) {
        component.set("v.ready", true);
        helper.createChart(component);
        helper.cmdDynamicRepor(component);
    },
    cmdCountryEvt : function(component,event,helper){
        console.log(component.get("v.countryName"));
helper.createChart(component);     
    }
 
})

ChartComponentHelper.js

({
    createChart : function (component) {
        var chartCanvas = component.find("chart").getElement();
        var action = component.get("c.getreport");
        action.setParams({reportId : component.get("v.countryName")});
        action.setCallback(this, function(response) {
            console.log("faz response"+JSON.stringify(response.getReturnValue()));
            var state = response.getState();
            if (state === "SUCCESS") {
                var reportResultData = JSON.parse(response.getReturnValue());
                var chartData = [];
                var chartLabels = [];
                if( reportResultData.groupingsDown.groupings.length > 0  ) {
                    for(var i=0; i < (reportResultData.groupingsDown.groupings.length); i++){
                        chartLabels.push(reportResultData.groupingsDown.groupings[i].label);
                        var keyTemp = reportResultData.groupingsDown.groupings[i].key;
                        var valueTemp = reportResultData.factMap[keyTemp + '!T'].aggregates[0].value ;
                        chartData.push(valueTemp);
                    }
                    console.log(" chartLabels ::  " + JSON.stringify(chartLabels));
                    console.log( " chartData :: " + JSON.stringify(chartData));                 
                    var chartdata = {
                        labels: chartLabels,
                        datasets: [
                            {
                                label:'Country',
                                data: chartData,
                                borderColor:'rgba(62, 159, 222, 1)',
                                fill: false,
                                pointBackgroundColor: "#FFFFFF",
                                pointBorderWidth: 4,
                                pointHoverRadius: 5,
                                pointRadius: 3,
                                bezierCurve: true,
                                pointHitRadius: 10
                            }
                        ]
                    }
                    var ctx = component.find("chart").getElement();
                    var chart = new Chart(ctx ,{
                        type: 'line',
                        data: chartdata,
                        options: {
                            legend: {
                                position: 'bottom',
                                padding: 10,
                            },
                            responsive: true
                        }
                    });                 
                }
            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message on createReport: " +errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    cmdDynamicRepor : function(component,event,helper){
        var dynamicPicklist = component.get("c.getDynamicReport");
        dynamicPicklist.setCallback(this,function(response){
            console.log("getDynamicReport====>>"+JSON.stringify(response.getReturnValue()));
            if(response.getState() === "SUCCESS"){
                component.set("v.report",response.getReturnValue());
            }
        });
        $A.enqueueAction(dynamicPicklist);
    }
})

D3ComponentApp 

<aura:application extends="force:slds">

<c:ChartComponent ></c:ChartComponent>

</aura:application>

Screenshot