I have a report that needs to display its data in chart format using chart.js I am getting error:

Assertion Failed!: Unable to get value for key 'chart.js'. No value provider was found for 'chart'. : false

Failing descriptor: {c:LightningReportComponent}

Below is my code:

JS Controller:

    afterScriptsLoaded : function(component, event, helper) {
        component.set("v.ready", true);

Helper class:

    createChart : function (component) {
        var ready = component.get("v.ready");
        if (ready === false) {
        var chartCanvas = component.find("chart").getElement();

        var action = component.get("c.getreport");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var reportResultData = JSON.parse(response.getReturnValue());
                var chartData = [];
                var chartLabels = [];
                for(var i=0; i < (reportResultData.groupingsDown.groupings.length); i++){
                    //Collect all labels for Chart.js data
                    var labelTemp = reportResultData.groupingsDown.groupings[i].label;

                    var keyTemp = reportResultData.groupingsDown.groupings[i].key;

                    //Collect all values for Chart.js data
                    var valueTemp = reportResultData.factMap[keyTemp + '!T'].aggregates[0].value ;
                //Construct chart
                var chart = new Chart(chartCanvas,{
                    type: 'doughnut',
                    data: {
                        labels: chartLabels,
                        datasets: [
                                label: "test",
                                data: chartData,
                                backgroundColor: [
                    options: {
                        cutoutPercentage: 75,
                        maintainAspectRatio: false,
                        legend: {
                            display: true,
                            labels: {
                                fontColor: '#000',
                                fontFamily:"Salesforce Sans, Arial, sans-serif SANS_SERIF"
                            layout: {
                                padding: 70,

            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message on createReport: " +
                } else {
                    console.log("Unknown error");

Lightning Component:

<aura:component controller="ReportsClass">
<ltng:require scripts="{!join(',',$Resource.requireJS,$Resource.ChartX/src/chart.js)}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<aura:attribute name="ready" type="Boolean" default="false"/>
<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="300"></canvas>

Apex Class:

public class ReportsClass {

public static String getreport(){
    Report reportRec = [SELECT Id FROM Report WHERE Id = '00O90000008xEoh'];

    Reports.ReportResults reportResult =
            Reports.ReportManager.runReport(reportRec.Id, true);

    return JSON.serialize(reportResult);

I referred this article to met my requirement but seems not working for me. Can someone kindly help me out here.


The problem here is with the URL you are using to load the Static resource


So the correct format is:

{!join(',', $Resource.requireJS, $Resource.ChartX + '/src/chart.js')}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.