Chart.js module for creating matrix charts
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'
Note: Chart.js v3.0.0-alpha is supported by @next version.
new Chart(ctx, {
type: 'matrix',
data: dataObject
});Matrix chart allows configuration of width and height of the data points in addition to standard Chart.js configuration.
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;
}
}]
},
});
You first need to install node dependencies (requires Node.js):
> npm installThe following commands will then be available from the repository root:
> gulp build // build dist files
> gulp build --watch // build and watch for changes
> gulp test // run all tests
> gulp test --watch // run all tests and watch for changes
> gulp test --coverage // run all tests and generate code coverage
> gulp lint // perform code linting
> gulp package // create an archive with dist files and sampleschartjs-chart-matrix is available under the MIT license.