Why is an ng-charts in an extended row in a Datatable not displayed?

Question

I'm trying to display ng charts in an extended child row Datatable but it is not displayed

function to add child

addChildTable(rowInstance, index: string) {
    const tr = $('#' + index);
    const row = this.table.row(rowInstance);
    const data = this.table.row(rowInstance).data();
    
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');


    } else {
        const childTable = this.getRowDetails();

        row.child(childTable).show();
        tr.addClass('shown');

    }
  }

this is my function that return ng-chart in component .ts but unfortunately return empty view

  getRowDetails() {

    return ` <div class="row">

                            <div class="card-body"  >

                            <canvas baseChart
                                [datasets]="` + this.lineChartData + `"
                                [labels]="` + this.lineChartLabels + `"
                                [options]="` + this.lineChartOptions + `"
                                [colors]="` + this.lineChartColors + `"
                                [legend]="` + this.lineChartLegend + `"
                                [chartType]="` + this.lineChartType + `"
                                [plugins]="` + this.lineChartPlugins + `">
                            </canvas>
                                        </div>
                                    </div>
                            </div>

</div>`;
}

Answer 1

Hi I think you should use a specific ID for every chart because with a fixed ID you can not display more than one chart on the same page.