I am seeking urgent help.

I have to show a donut chart on a record. I tried to use chart.js latest library 3.2.0 but still, it doesn't work.

APEX Controller -

public class FeesChartController {
public static List<DataSet> getFees(String QuoteId){
    List<SBQQ__Quote__c> result =  [Select Id,Fee1__c, Fee2__c, Fee3__c from SBQQ__Quote__c where Id =:QuoteId ];
    List<DataSet> dataSet = new List<DataSet>();
    DataSet GpFees = new DataSet('Fee 1',result[0].Fee1__c);
    DataSet Salary = new DataSet('Fee 2',result[0].Fee2__c);
    DataSet Compliance = new DataSet('Fee 3',result[0].Fee3__c);
    return dataSet ; 

public class DataSet{
    public DataSet(String label ,Decimal Value){
        this.label  = label ; 
        this.value = Value ;
    public String label {get;set;}
    public Decimal  value {get;set;}



<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller="FeesChartController">
    <aura:attribute name="QuoteId" type="string"/>
<ltng:require scripts="{!$Resource.chartjs}"
              afterScriptsLoaded="{!c.scriptsLoaded}" />
<canvas id="pie-chart" width="950" height="250"></canvas></aura:component>

JS Controller

scriptsLoaded : function(component, event, helper) {
    var action = component.get("c.getFees");
    var quoteId = component.get("v.recordId");
        "QuoteId": quoteId
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            let val = response.getReturnValue();
            var labelset=[] ;
            var dataset=[] ;
            val.forEach(function(key) {
                labelset.push(key.label) ; 
                dataset.push(key.value) ; 
            new Chart(document.getElementById("pie-chart"), {
                type: 'pie',
                data: {
                    datasets: [{
                        label: "Count of Task",
                        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9"],
                        data: dataset
                options: {
                    title: {
                        display: true,
                        text: 'Total Tasks by Status'

I tried solutions mentioned on other similar questions as well but no luck with that too.

Current Output - It's just showing a blank block. Nothing getting showed up on the record page where I have added this component.

Expected - It should prepare and show a chart.

Nothing showed up as an error.

The 1st tried solution is given by @MohithShrivastava - Radar chart using Chart.js not working

The 2nd tried solution is given by @CarlosNaranjo - Donut chart in lightning component

The 3rd tried solution - Lightning Chart.js example

Any urgent help will be really appreciated. Thanks

  • 2
    Welcome to SFSE! Could you please edit your post to describe the specific problem behavior, including any error messages, console logs, observed behaviors...?
    – David Reed
    Apr 27 '21 at 21:49
  • @DavidReed - I have edited the original post and mentioned current output, expectations. Apr 28 '21 at 6:33

Your Answer

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

Browse other questions tagged or ask your own question.