chartjs-chart-treemap

WebJar for chartjs-chart-treemap

License	MIT
Categories	JavaScript Languages
GroupId	org.webjars.npm
ArtifactId	chartjs-chart-treemap
Last Version	0.2.3
Release Date	Sep 11, 2020
Type	jar
Description	chartjs-chart-treemap WebJar for chartjs-chart-treemap
Project URL	https://www.webjars.org
Source Code Management	https://github.com/kurkle/chartjs-chart-treemap

Download chartjs-chart-treemap

Filename	Size
chartjs-chart-treemap-0.2.3.pom
chartjs-chart-treemap-0.2.3.jar	13 KB
chartjs-chart-treemap-0.2.3-sources.jar	22 bytes
chartjs-chart-treemap-0.2.3-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/chartjs-chart-treemap/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>chartjs-chart-treemap</artifactId>
    <version>0.2.3</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/chartjs-chart-treemap/
implementation 'org.webjars.npm:chartjs-chart-treemap:0.2.3'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/chartjs-chart-treemap/
implementation ("org.webjars.npm:chartjs-chart-treemap:0.2.3")

Apache Buildr

'org.webjars.npm:chartjs-chart-treemap:jar:0.2.3'

Apache Ivy

<dependency org="org.webjars.npm" name="chartjs-chart-treemap" rev="0.2.3">
  <artifact name="chartjs-chart-treemap" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='chartjs-chart-treemap', version='0.2.3')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "chartjs-chart-treemap" % "0.2.3"

Leiningen

[org.webjars.npm/chartjs-chart-treemap "0.2.3"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

chartjs-chart-treemap

Chart.js v3.0.0-beta.3 module for creating treemap charts. Implementation for Chart.js v2 is in 2.x branch

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',
    tree: dataObject,
    key: 'value',
    groups: ['main', 'sub']
});

Configuration

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],
            font: {
                color: '#000',
                family: 'serif',
                size: 12,
                style: 'normal',
            },
            backgroundColor: function(ctx) {
                var value = ctx.dataset.data[ctx.dataIndex];
                var alpha = (value + 3) / 10;
                return Color('blue').alpha(alpha).rgbString();
            },
            rtl: false // control in which direction the squares are positioned
        }]
    },
});

Note about chartjs-plugin-datalabels

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
        }
    }
});

Example

Live examples @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.

Versions

Version
0.2.3 Sep 11, 2020