Trouble running under React

Hi! I’ve got an example that runs well using your Matrix Chart on Categories example within an HTML file which loads JS files using your Util function. No problem. But when I try to reproduce the exact same chart in a React context, I run into two issues:

1. If I use plain npm install chartjs-chart-matrix I get v0.1.3 and chart.js 2.9.4 as the loaded dependency. The chart loads without a type error (i.e. the matrix type appears to have been added), but I just get an empty graph that seems to completely ignore the data and scales. Just a blank graph with axes going from 0 to 1.

2. Finding the same issue with the HTML example and older chartjs-chart-matrix/chart.js versions, I became convinced that I should use chartjs-chart-matrix 1.0.0-beta, which loads chart.js 3.0.0-beta7 as a dependency. But when I try those versions, React throws the following error:

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor

which appears to be thrown by the constructor in

    componentDidMount() {
        const { chartData, samples, features, dataOptions } = this.props;
        this.chart = new Chart(this.graph, { ....

Do you have an example of current chartjs-chart-matrix usage in a React app? I’ve got a situation where I have to load code and modules via React, I do not have access to the containing HTML, which is outside of the project. Thanks!

By the way, I’m importing chartjs-chart-matrix with the following:

import React from 'react';
import Chart from 'chart.js';
import 'chartjs-chart-matrix'

[jmuela1015]

Here are some notes for getting chartjs-chart-matrix@1.0.0 working with react-chartjs-2@3.0.0

I added this to App.js

import {Chart} from "react-chartjs-2";
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';

Chart.register(MatrixController, MatrixElement);

I created a Matrix.js component:

import React from "react";
import ChartComponent from "react-chartjs-2";
export const Matrix = props => <ChartComponent  type="matrix" {...props} />

And use the data from https://chartjs-chart-matrix.pages.dev/usage.html

import {Matrix} from "./Matrix";

export const Example = () => (
<Matrix
  data={{
    datasets: [{
      label: 'Basic matrix',
      data: [{x: 1, y: 1}, {x: 2, y: 1}, {x: 1, y: 2}, {x: 2, y: 2}],
      borderWidth: 1,
      borderColor: 'rgba(0,0,0,0.5)',
      backgroundColor: 'rgba(200,200,0,0.3)',
      width: ({chart}) => (chart.chartArea || {}).width / 2 - 1,
      height: ({chart}) => (chart.chartArea || {}).height / 2 - 1,
    }],
  }}
  options={{
    scales: {
      x: {
        display: false,
        min: 0.5,
        max: 2.5,
        offset: false
      },
      y: {
        display: false,
        min: 0.5,
        max: 2.5
      }
    }
  }} 
/>
)

[sammyjava]

OK, I’ve solved this by realizing that there is new documentation for chart.js 3.0! I’m down to trying to get Chart.helpers.color to be recognized, but the other issues are fixed with the code below, so I’ll close this.

import React from 'react';
import { Chart, Tooltip, CategoryScale, LinearScale, Title } from 'chart.js';
import { Matrix, MatrixController } from 'chartjs-chart-matrix';

Chart.register(Tooltip, CategoryScale, LinearScale, Title, Matrix, MatrixController);