chartjs-chart-matrix

chartjs-chart-matrix

Chart.js v3.0.0 module for creating matrix charts

Documentation

To create a matrix chart, include chartjs-chart-matrix.js after chart.js and then create the chart by setting the type attribute to 'matrix'

const chart = new Chart(ctx, {
  type: 'matrix',
  data: dataObject
});

Configuration

Matrix chart allows configuration of width and height of the data points in addition to standard Chart.js configuration.

const chart = new Chart(ctx, {
  type: 'matrix',
  data: {
    datasets: [{
      label: 'My Matrix',
      data: [
        {x: 1, y: 1, v: 11},
        {x: 2, y: 2, v: 22},
        {x: 3, y: 3, v: 33}
      ],
      backgroundColor: function(ctx) {
        var value = ctx.dataset.data[ctx.dataIndex].v;
        var alpha = (value - 5) / 40;
        return Color('green').alpha(alpha).rgbString();
      },
      width: function(ctx) {
        var a = ctx.chart.chartArea;
        return (a.right - a.left) / 3.5;
      },
      height: function(ctx) {
        var a = ctx.chart.chartArea;
        return (a.bottom - a.top) / 3.5;
      }
    }]
  },
});

Example

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.