Home

Awesome

chartjs-chart-matrix

Chart.js v3+, v4+ module for creating matrix charts

npm release npm bundle size GitHub Quality Gate Status documentation

Example

Matrix Example Image

Documentation

You can find documentation for chartjs-chart-matrix at https://chartjs-chart-matrix.pages.dev/.

Quickstart

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-matrix@1.1"></script>
</head>
<body>
  <div class="chart-container">
    <canvas id="matrix-chart">
  </div>
  <script>
    const chart = new Chart('matrix-chart', {
      type: '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
          }
        }
      }
    });
  </script>
</body>

This simple example is also available online in the documentation: https://chartjs-chart-matrix.pages.dev/usage.html

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> npm run build        // build dist files
> npm test             // run all tests
> npm run lint         // perform code linting
> npm package          // create an archive with dist files and samples

License

chartjs-chart-matrix is available under the MIT license.