How to create dynamic data sets on ng-charts

208 Views Asked by At

I am using ng2-Charts on my project, I can able to create charts with fixed data sets(example: I can create chart with 3 lines). But I want to create a stacked bar chart, even I am able to create this chart, but I am failing on creating the datasets dynamically.

The Bars will dynamically change, one time there will be two bars(stacked), another time It will be 5 it is purely user-based.

I have tried the below code.

       getChartdata(){
         //datainfo is response coming from API
          let data_arry:any =[];
          let data_obj:any ={};   
          let time_period:any = ["sun", "mon", "the", "wed", "the", "fri", "sat"];
          for(let key of datainfo){
             data_obj['data'] = [1,2,3,4]
             data_obj['stack'] = 'a';
             data_obj['barPercentage'] = 0.5;
             data_obj['barThickness'] = 30;
             data_arry.push(data_obj)
           }
          this.StringChart(data_arry, time_period)
       }





        StringChart(data_arry:any, time_period:any) {                
             var  Tooltip_options: any = {
                              maintainAspectRatio: false,
                            
                              scales: {
                                 yAxes: [{
                                     barPercentage: 1.6,
                                     gridLines: {
                                         drawBorder: false,
                                         color: 'rgba(29,140,248,0.0)',
                                         zeroLineColor: "transparent",
                                      },
  
                                  }],

                                  xAxes: [{
                                     barPercentage: 1.6,
                                     gridLines: {
                                        drawBorder: false,
                                        color: 'rgba(0,242,195,0.1)',
                                        zeroLineColor: "transparent",
                                     },
                                    ticks: {
                                         padding: 20,
                                         fontColor: "#9e9e9e"
                                     }
                                   }]
                        }
                     };


           this.LC_Data  = data_arry;

           this.LC_Labels  = time_period;
            this.LC_Options = Tooltip_options;

            }

When I do console.log it is displaying an array of objects, but not able to see the Chart, I am getting the below error :

          ERROR TypeError: labels.slice is not a function
0

There are 0 best solutions below