Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/kurkle/chartjs-chart-treemap/tree/2.x below:

GitHub - kurkle/chartjs-chart-treemap at 2.x

Chart.js module for creating treemap charts. Compatible with Chart.js versions 2.8.x and 2.9.x

Implementation for Chart.js v3 is in next branch

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();
            }
        }]
    },
});

Treemap is not using any scales currently and thats why chartjs-plugin-datalabels plugin does not work with it. When other charts are using datalables on the same page, you'll need to disable the plugin for treemap charts:

new Chart(ctx, {
    type: 'treemap',
    data: (...),
    options: {
        plugins: {
            datalabels: false
        }
    }
});

Live examples @codepen.io

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

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4