https://github.com/kurkle/chartjs-chart-matrix

Chart.js module for creating matrix charts
https://github.com/kurkle/chartjs-chart-matrix

Last synced: 3 months 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 (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-02-12T16:15:42.000Z (4 months ago)
• Last Synced: 2024-02-15T01:42:46.488Z (4 months ago)
• Language: JavaScript
• Size: 2.7 MB
• Stars: 196
• Watchers: 6
• Forks: 18
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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).