chartjs-chart-treemap

chartjs-chart-treemap

Chart.js module for creating treemap charts

Documentation

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

new Chart(ctx, {
    type: 'treemap',
    data: dataObject
});

Configuration

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

new Chart(ctx, {
    type: 'treemap',
    data: {
        datasets: [{
            label: 'Basic treemap',
            data: [6,6,5,4,3,2,2,1],
            backgroundColor: function(ctx) {
                var value = ctx.dataset.data[ctx.dataIndex];
                var alpha = (value + 3) / 10;
                return Color('blue').alpha(alpha).rgbString();
            }
        }]
    },
});

Example

Live example @codepen.io

Development

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

> npm install

The 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 samples

License

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