How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page

Question

app.component.html This is my app.component file where i show my chart

    <div style="display: block;">
         <canvas baseChart width="400" height="400"
                    [datasets]="lineChartData"
                    [labels]="lineChartLabels"
                    [options]="lineChartOptions"
                    [colors]="lineChartColors"
                    [legend]="lineChartLegend"
                    [chartType]="lineChartType">
         </canvas>
     </div>

app.component.ts My ts file where the logic impleneted i have issue there i am not know how to perform logic to show the data i have issue how to create method in it which will call in the app.component.html file

   constructor(private chartService: ChartServiceService) { }
    
   ngOnInit(): void {
      this.getlinechart();
   }
 getlinechart(){
     this.chartService.getLineChart().subscribe(res => {
     this.linechart = res;
     console.log(res);

     let lincechartData = res.list[0].data;
     let lincechartLabels =  res.list[0].graphlabels;
  
     public lineChartData:any = this.lincechartData;
      **I,m facing issue here above to create method to store the 
        data and used in html compiler give the error this ,' 
 expected.ts(1005)
 Cannot find name 'lineChartData'**
  
});

} app.service.ts This is service file which getting the data from the backend nodejs api

  getLineChart(){
       return this.httpClient.get<any> 
        ('http://localhost:3000/api/chart/line')
      .pipe(
        map(result => result)
      )

}

Answer 1

If i undestand correctly you are trying to read data from a database and put it on a chart. I did something similar, but i had a bit different approach:

HTML:

<canvas id="myChart" width="300" height="100"></canvas> <br/>

Chart config:

var config = {
    type: 'line',
    data: { datasets: [] }, // trend data goes here
    options: { 
        scales: {
            xAxis: { // x axis
                type: 'time',
            }
        },
    },
}

New chart:

function newChart() {
     config.data.datasets = []; // reset data
     populateTrend(config); // populate chart

     if (window.hasOwnProperty("graph")) { // destroy previous chart
          if (typeof window.graph.resetZoom !== "undefined") { // if you have a zoom plugin
               window.graph.resetZoom();
          }
          window.graph.destroy();
     }

     let ctx = document.getElementById('myChart').getContext('2d'); // canvas
     window.graph = new Chart(ctx, config); // make the chart
}

populate trend:

function populateTrend (config) {
    // data sets and scales
    let datasets = config.data.datasets, scales = config.options.scales;

    let log = data; // this is where you read from your database

    let dataset = { // add some data here
        data: [],
        label: log.description, 
        fill: false, 
        radius: 0,
        unit: log.unit, 
        pointType: log.pointType,
        yAxisID: log.unit, // y axis
    };

    // this is where the real data goes
    // you should push the data in a loop
    dataset.data.push({
        "x": something.getTime(),
        "y": null,
        "ymin": null,
        "ymax": null,
    });

    datasets.push(dataset); // add data set to config
}