[Chartjs]-Chart.js and Angular 8 – Dynamically updating Chart.js labels and data from *ngfor

by

1👍

The reply Jeremy Thille gave me helped me in the right direction. By installing ng2-charts, I was able to add a chart that allowed me to push the labels and data to the chart much easier:

HTML:

<div class="deposit-container">
            <div class="chart-container">
              <canvas baseChart
              width="290" 
              height="290"
              [data]="doughnutChartData"
              [labels]="doughnutChartLabels"
              [options]="doughnutChartOptions"
              [colors]="doughnutChartColors"
              [chartType]="doughnutChartType"></canvas>
            </div>
            <div class="source-container">
                <div *ngFor="let depositSource of depositSources; let depositParent = index" id="{{'source' + depositParent}}" class="deposit-source">
                  <mat-form-field class="dropdown">
                    <mat-select placeholder="Deposit source" (selectionChange)="getLabel($event)">
                      <mat-option *ngFor="let deposit of deposits; let depositSourceOption = index" [value]="deposit.value" id="{{'option' + depositSourceOption}}">
                        {{ deposit.viewValue }}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                  <mat-form-field class="textfield">
                    <input
                      matInput
                      currencyMask
                      [options]="{ align: 'right', prefix: '£ ', thousands: ',', precision: 0 }"
                      placeholder="£ 0"
                      [(ngModel)]="depositSourceAmount[depositParent]"
                      [ngModelOptions]="{ standalone: true }"
                      (focusout)="getData(depositParent)"
                    />
                  </mat-form-field>
                  <mat-icon (click)="removeDeposit(depositSource)">delete</mat-icon>
                </div>
                <a id="addDepositSource" (click)="appendDeposit()">+ Add Deposit Source</a>
              </div>
        </div>

TS:

  public doughnutChartLabels = [];
  public doughnutChartData = [];
  public doughnutChartType = 'doughnut';

  public doughnutChartOptions = {
    legend: {
      display: false
    }
  };

  public doughnutChartColors: Array<any> = [
    { 
      backgroundColor: [
        'rgba(254, 11, 48, 1)',
        'rgba(86, 223, 144, 1)',
        'rgba(186, 223, 86, 1)',
        'rgba(191, 86, 223, 1)',
        'rgba(235, 5, 5, 1)',
        'rgba(43, 203, 186, 1)',
        'rgba(5, 235, 235, 1)',
        'rgba(169, 86, 223, 1)',
        'rgba(252, 92, 101, 1)',
        'rgba(86, 160, 223, 1)',
        'rgba(102, 86, 223, 1)',
        'rgba(223, 86, 218, 1)'
      ]
    }
]

  getLabel(event) {
    let target = event.source.selected._element.nativeElement;
    console.log(target.innerText.trim());
    this.doughnutChartLabels.push(target.innerText.trim());
    this.chart.chart.update();
  }

  getData(depositParent) {
    let data = this.depositSourceAmount[depositParent];
    this.doughnutChartData.push(data);
    this.chart.chart.update();
  }

  depositSources: depositCreate[] = [];

  appendDeposit() {
    this.depositSources.push(new depositCreate());
  }

  removeDeposit = function(depositSource) {
    this.depositSources.splice(this.depositSources.indexOf(depositSource), 1);
  }

I still need to figure out to edit and remove the data from the array from the right place, but that’s a separate problem entirely so I’ll mark this as solved.

Leave a comment