Adding Matrix Chart to Angular

I know this is very similar to issue #7, but I am still unable to add the Matrix chart type to my angular project after reading through issue #7 as well as other resources online.

I am using ng2-charts package and have added chart.js to the project as well. I tried to create a new chart component

import { Component, Input, OnInit } from '@angular/core';
import { Chart, ChartDataSets, ChartOptions, ChartType } from 'chart.js';
import { Controller } from 'chartjs-chart-matrix';

@Component({
  selector: 'comp-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss'],
})

export class ChartComponent implements OnInit {

  @Input() chart: {
    type: ChartType,
    datasets: ChartDataSets,
    options: ChartOptions
  };

  constructor() {
    Chart.controllers.matrix = Controller;
  }
}

Here is the HTML code

<div>
  <canvas baseChart *ngIf="chart" [datasets]="chart.datasets" [options]="chart.options" [chartType]="chart.type"></canvas>
</div>

When I run the code, I am getting an error stating the matrix type is unsupported.

ERROR Error: getColors - Unsupported chart type matrix
    at getColors (ng2-charts.js:57)
    at ng2-charts.js:520
    at Array.forEach (<anonymous>)
    at BaseChartDirective.updateColors (ng2-charts.js:510)
    at BaseChartDirective.propagateDatasetsToData (ng2-charts.js:761)
    at BaseChartDirective.ngOnChanges (ng2-charts.js:545)
    at BaseChartDirective.wrapOnChangesHook_inPreviousChangesStorage (core.js:26979)
    at callHook (core.js:4730)
    at callHooks (core.js:4690)
    at executeInitAndCheckHooks (core.js:4630)

Your assistance is deeply appreciated.

[tdoctor]

Is there a working example of this anywhere? I’ve been reading the same posts trying different things for 2 days now and cannot seem to get chart.js, chartjs-chart-matrix, ng2-charts working together to show a simple matrix.

[tdoctor]

Thank you. I had stopped trying, but will take a look at your solution!

From: Emiliano Bonilla @.> Sent: Wednesday, March 30, 2022 2:02 PM To: kurkle/chartjs-chart-matrix @.> Cc: tdoctor @.>; Comment @.> Subject: [External] Re: [kurkle/chartjs-chart-matrix] Adding Matrix Chart to Angular (#9)

This message is from an EXTERNAL SENDER - be CAUTIOUS, particularly with links and attachments.

---

After several attempts, I was able to get it to work. To make the plugin work in angular and with ng2-charts

import { MatrixController, MatrixElement } from ‘chartjs-chart-matrix’;

constructor() {

Chart.register(MatrixController, MatrixElement);

}

— Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_kurkle_chartjs-2Dchart-2Dmatrix_issues_9-23issuecomment-2D1083448827&d=DwMCaQ&c=eIGjsITfXP_y-DLLX0uEHXJvU8nOHrUK8IrwNKOtkVU&r=Iyki-VLGiXxYwr7Il0lG-ySL7gqqOI767pm6TnjwCEg&m=SVX_UmvxkrWWCvs42BaP1SooqcDFSW22WVGNhFeV_pzmMDfv0FOFODnfzVEFgmbO&s=KW44bv9nhpNK9oG3x8n_FzVTzDEMMBjG-Us3x6uaE44&e=, or unsubscribehttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ABWW5Z7GIX27XTMY47NDEILVCSJKVANCNFSM4PUPKK2A&d=DwMCaQ&c=eIGjsITfXP_y-DLLX0uEHXJvU8nOHrUK8IrwNKOtkVU&r=Iyki-VLGiXxYwr7Il0lG-ySL7gqqOI767pm6TnjwCEg&m=SVX_UmvxkrWWCvs42BaP1SooqcDFSW22WVGNhFeV_pzmMDfv0FOFODnfzVEFgmbO&s=8rx4soqxOfpMp8WiOwPk1HTVcoL_dPjjpslAuSFw0xs&e=. You are receiving this because you commented.Message ID: @.@.>>

---

This message is for the designated recipient only and may contain privileged, proprietary, or otherwise confidential information. If you have received it in error, please notify the sender immediately and delete the original. Any other use of the e-mail by you is prohibited. Where allowed by local law, electronic communications with Accenture and its affiliates, including e-mail and instant messaging (including content), may be scanned by our systems for the purposes of information security and assessment of internal compliance with Accenture policy. Your privacy is important to us. Accenture uses your personal data only in compliance with data protection laws. For further information on how Accenture processes your personal data, please see our privacy statement at https://www.accenture.com/us-en/privacy-policy.

---

www.accenture.com