Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kurkle/chartjs-chart-matrix
Chart.js module for creating matrix charts
https://github.com/kurkle/chartjs-chart-matrix
Last synced: 13 days ago
JSON representation
Chart.js module for creating matrix charts
- Host: GitHub
- URL: https://github.com/kurkle/chartjs-chart-matrix
- Owner: kurkle
- License: mit
- Created: 2019-05-07T18:15:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-14T16:22:45.000Z (29 days ago)
- Last Synced: 2024-10-20T17:05:55.672Z (23 days ago)
- Language: JavaScript
- Size: 2.8 MB
- Stars: 212
- Watchers: 6
- Forks: 18
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - matrix
README
# chartjs-chart-matrix
[Chart.js](https://www.chartjs.org/) **v3+, v4+** module for creating matrix charts
[![npm](https://img.shields.io/npm/v/chartjs-chart-matrix.svg)](https://www.npmjs.com/package/chartjs-chart-matrix)
[![release](https://img.shields.io/github/release/kurkle/chartjs-chart-matrix.svg?style=flat-square)](https://github.com/kurkle/chartjs-chart-matrix/releases/latest)
![npm bundle size](https://img.shields.io/bundlephobia/min/chartjs-chart-matrix.svg)
![GitHub](https://img.shields.io/github/license/kurkle/chartjs-chart-matrix.svg)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-chart-matrix&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-chart-matrix)
[![documentation](https://img.shields.io/static/v1?message=Documentation&color=informational)](https://chartjs-chart-matrix.pages.dev)## Example
![Matrix Example Image](matrix.png)
## Documentation
You can find documentation for chartjs-chart-matrix at [https://chartjs-chart-matrix.pages.dev/](https://chartjs-chart-matrix.pages.dev/).
## Quickstart
```html
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
}
}
}
});
```
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](https://nodejs.org/)):
```bash
> npm install
```The following commands will then be available from the repository root:
```bash
> 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](https://opensource.org/licenses/MIT).