Chart.js module for creating treemap charts
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',
tree: dataObject,
key: 'value',
groups: ['main', 'sub']
});
Tree data should be provided in tree
property of dataset. data
is then automatically build. key
defines the key name in data objects to use for value. groups
array can be provided to display multiple levels of hierarchy.
Data is summarized to groups internally.
new Chart(ctx, {
type: 'treemap',
data: {
datasets: [{
label: 'Basic treemap',
tree: [6,6,5,4,3,2,2,1],
fontColor: '#000',
fontFamily: 'serif',
fontSize: 12,
fontStyle: 'normal',
backgroundColor: function(ctx) {
var value = ctx.dataset.data[ctx.dataIndex];
var alpha = (value + 3) / 10;
return Color('blue').alpha(alpha).rgbString();
}
}]
},
});
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
chartjs-chart-treemap is available under the MIT license.