The dataset is returning null value while using lightning component chart

Question

Apex Controller

public class TableBookingStatusController {
    
    @AuraEnabled
    public static List<DataSet> getAllTables(){
        List<Table__c> result =  [Select Name, Time_Slot__c from Table__c where IsBooked__c=true];
        List<DataSet> dataSet = new List<DataSet>();
        for(Table__c ar:result){
            String Name =  (String)ar.get('Name') ;
            //Integer total =(Integer)ar.get('cnt'); 
            String TimeSlot=(String)ar.get('Time_Slot__c');
            dataSet.add(new DataSet(Name,TimeSlot));
            
        }
        System.debug('dataSet'+dataSet);
        
        
        return dataSet ;  
    }
}

JS controller

({
    scriptsLoaded : function(component, event, helper) {
        
        var action = component.get("c.getAllTables");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                let val = response.getReturnValue() ;
                var dataset=[];
                var labely=[];
                val.forEach(function(key) {
                    labely.push(key.Name);
                    // dataset.push(key.Name) ; 
                    dataset.push(key.TimeSlot); //Getting a null value in this dataset
                    //console.log(labely);
                    //console.log(key.TimeSlot);
                    console.log(dataset);

                    
                });
                new Chart(document.getElementById("bar-chart"), {
                    type: 'horizontalBar',
                    data: {
                        labels:['10:00','10:30','11:00','11:30','12:00','12:30','1:00','1:30','2:00','2:30','3:00','3:30','4:00','4:30','5:00','5:30','6:00','6:30','7:00','7:30','8:00','8:30','9:00','9:30','10:00'],
                        datasets: [{
                            label: "Time Slot",
                            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9"],
                            data:dataset
                        }]
                    },
                    
                 
                    options: {
                        scaleShowValues: true,
                        title: {
                            display: true,
                            text: 'Tables Booked'
                        },
                        scales: {
                            xAxes: [{
                                type: 'category',
                                position: 'top',
                                
                                
                            }],
                            yAxes: [{
                                position: 'left',
                                type: 'linear',
                                
                                ticks: {
                                    min: 0,
                                    max: 10,

                                    callback: function(value, index, values) {
                                        //console.log(labely);
                                        return labely[value];
                                    }
                                },
                                
                                // Specific to Horizontal Bar Controller
                                categoryPercentage: 0.8,
                                barPercentage: 0.9,
                                
                                // grid line settings
                                gridLines: {
                                    offsetGridLines: true
                                }
                            }]
                        },
                        
                        
                    }
                });
            }
        });
        $A.enqueueAction(action);
        
    }
})

DataSet controller

public class DataSet {
    
    public DataSet(String name, String timeslot){
            this.Name  = name ; 
            this.TimeSlot = timeslot ;
            //this.count=count;
            system.debug(this.Name + this.TimeSlot);
        }
       
        @AuraEnabled
        //public Integer  count {get;set;}
        public String  Name {get;set;}
        public String  TimeSlot {get;set;}
}

Answer 1

You need to add @AuraEnabled to all members of the DataSet class.

public class DataSet {
    
    public DataSet(String name, String timeslot){
        this.Name  = name ; 
        this.TimeSlot = timeslot ;
        //this.count=count;
        system.debug(this.Name + this.TimeSlot);
    }
       
    @AuraEnabled
    public String  Name {get;set;}
    @AuraEnabled
    public String  TimeSlot {get;set;}
}