'How to make charts with data from material table using ngx

Is there any way to send data from my material table to ngx-charts? I'm trying to build a chart, but I don't understand how to pass the data correctly. Or advise something else, not ngx-charts, so that I can send data from the material table to chart to show.

This is my HTML table

<table mat-table [dataSource]="dataSource">

                        <ng-container matColumnDef="id_acid_oil">
                          <th class="column-width" mat-header-cell *matHeaderCellDef> ID </th>
                          <td mat-cell *matCellDef="let oilAcid"> {{oilAcid.id_acid_oil}}</td>
                        </ng-container>

                        <ng-container matColumnDef="id_oils">
                          <th class="column-width" mat-header-cell *matHeaderCellDef> ID масла </th>
                          <td mat-cell *matCellDef="let oilAcid"> {{oilAcid.id_oils}} </td>
                        </ng-container>

                        <ng-container matColumnDef="name_acids">
                          <th class="column-width" mat-header-cell *matHeaderCellDef> Название </th>
                          <td mat-cell *matCellDef="let oilAcid"> {{oilAcid.name_acids}} </td>
                        </ng-container>

                        <ng-container matColumnDef="acid_value">
                          <th mat-header-cell *matHeaderCellDef> Значение </th>
                          <td class="big-col" mat-cell *matCellDef="let oilAcid"> {{oilAcid.acid_value}}

                        </td>
                        </ng-container>
                        <ng-container matColumnDef="clean">
                          <th mat-header-cell *matHeaderCellDef> </th>
                          <td class="small-col"mat-cell *matCellDef="let oilAcid"></td>
</table>

That's how i made the Get request to receive data from server

  public OilAcids: OilAcid[] = [];
  public editOilAcids: OilAcid | undefined;
  public deleteOilAcids: OilAcid | undefined;

  displayedColumns: string[] = ['id_acid_oil', 'id_oils', 'name_acids', 'acid_value','clean'];
  dataSource = new MatTableDataSource<OilAcid>();

ngOnInit() {
    this.getOilAcid();
  }

public getOilAcid(): void {
  this.oilAcidService.getOilAcid().subscribe({
    next: (response: OilAcid[]) => {
      this.dataSource.data = response;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

    },
    error: (error: HttpErrorResponse) => {
      alert(error.message);
    }
  })
}

Sorry, i can't attach screenshot with table, but I will do what you ask, if necessary. Thank you in advance for your help.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source