Используйте флажок для обработки многих диаграмм в диаграммах ngx

Question

У меня есть четыре графика, и я хочу использовать флажок для управления ими.когда я нажимаю на флажок, должно появиться изображение, а если я нажму, оно должно исчезнуть.Тем не менее, мой код не работает должным образом, потому что графика появляется случайно, когда они отмечены или не отмечены.

вот мой код в файле .ts:

dataChart: any[] = [{
        'name': 'orders',
        'series': []
    }

    ,
    {
        'name': 'invoices',
        'series': []
    }

    ,
    {
        'name': 'customers',
        'series': []
    }

    ,
    {
        'name': 'products',
        'series': []
    }

];

selectOrderCheckBox() {
    if (this.chkOrders) {
        this.service.getChartData().subscribe(res => {
                console.log(res['data']) if (res['status_code'] === 200) {
                    let orders = res['data'][0]['serieOrders'];
                    let i: number;

                    for (i = 0; i < orders.length;

                        i++) {
                        this.dataChart[0].series.push({
                                'name': orders[i]['date'],
                                'value': orders[i]['nbre'],
                            }

                        );
                    }
                }
            }

            ,
            err => {}

        );
        this.dataChart = [...this.dataChart];

    } else if (this.chkOrders == false) {

        this.dataChart[0].series = [];
        this.dataChart = [...this.dataChart];

    } else {}
}


selectInvoiceCheckBox() {
    if (this.chkInvoices) {
        this.service.getChartData().subscribe(res => {
                console.log(res['data']) if (res['status_code'] === 200) {
                    let invoices = res['data'][0]['serieInvoices'];
                    let i: number;

                    for (i = 0; i < invoices.length;

                        i++) {
                        this.dataChart[1].series.push({
                                'name': invoices[i]['date'],
                                'value': invoices[i]['nbre'],
                            }

                        );
                    }

                }
            }

            ,
            err => {}

        );
        this.dataChart = [...this.dataChart];

    } else if (this.chkInvoices == false) {

        this.dataChart[1].series = [];
        this.dataChart = [...this.dataChart];

    } else {}
}


selectCustomerCheckBox() {
    if (this.chkCustomers) {
        this.service.getChartData().subscribe(res => {
                console.log(res['data']) if (res['status_code'] === 200) {
                    let customers = res['data'][0]['serieCustomers'];
                    let i: number;

                    for (i = 0; i < customers.length;

                        i++) {
                        this.dataChart[2].series.push({
                                'name': customers[i]['date'],
                                'value': customers[i]['nbre'],
                            }

                        );
                    }

                }
            }

            ,
            err => {}

        );
        this.dataChart = [...this.dataChart];

    } else if (this.chkCustomers == false) {

        this.dataChart[2].series = [];
        this.dataChart = [...this.dataChart];

    } else {}
}


selectProductCheckBox() {
    if (this.chkProducts) {
        this.service.getChartData().subscribe(res => {
                console.log(res['data']) if (res['status_code'] === 200) {
                    let products = res['data'][0]['serieProducts'];
                    let i: number;

                    for (i = 0; i < product.length;

                        i++) {
                        this.dataChart[3].series.push({
                                'name': products[i]['date'],
                                'value': products[i]['nbre'],
                            }

                        );
                    }

                }
            }

            ,
            err => {}

        );
        this.dataChart = [...this.dataChart];

    } else if (this.chkProducts == false) {

        this.dataChart[3].series = [];
        this.dataChart = [...this.dataChart];

    } else {}
}


selectCheckAll {
    selectOrderCheckBox();
    selectInvoiceCheckBox();
    selectCustomerCheckBox();
    selectProductCheckBox();
}

вот мой код в.HTML-файл:

Выбрать диаграмму

<div class="option1">
    <label ><input type="checkbox" [(ngModel)]="allChart" (change)="selectCheckAll()" > Toutes</label>
    <label> <input type="checkbox" [(ngModel)]="chkOrders" (change)="selectOrderCheckBox()" />Orders</label>
    <label><input type="checkbox"  [(ngModel)]="chkInvoices" (change)="selectInvoiceCheckBox()" /> Invoices</label>
    <label><input type="checkbox"  [(ngModel)]="chkCustomers" (change)="selectCustomerCheckBox()"/> Customers</label>
    <label><input type="checkbox"  [(ngModel)]="chkProducts"  (change)="selectProductCheckBox()"/>Products</label>
</div>

<div class="col-xxl-12">
  <nb-card class="card-coubes" style="height:auto;">
    <nb-card-body>
      <ngx-charts-line-chart
                [view]="view"
                [scheme]="colorScheme"
                [results]="dataChart"
                [gradient]="gradient"
                [xAxis]="showXAxis"
                [yAxis]="showYAxis"                                     
                [legend]="showLegend"
                [showXAxisLabel]="showXAxisLabel"
                [showYAxisLabel]="showYAxisLabel"
                [xAxisLabel]="xAxisLabel"
                [yAxisLabel]="yAxisLabel"
                [autoScale]="true"
                [timeline]="timeline"
                (select)="onSelect($event)">
      </ngx-charts-line-chart>
    </nb-card-body>
  </nb-card>
</div>

Как решить проблему?