sgratzl/chartjs-plugin-hierarchical

Chart.js scale for hierarchical tree-like data structure

TypeScript

58

388 commits

updated Oct 4, 2025

See the code

README

Chart.js Hierarchical Scale Plugin

datavisyn NPM Package Github Actions

Chart.js module for adding a new categorical scale which mimics a hierarchical tree.

hierarchy

Check out also my other chart.js plugins:

Install

npm install --save chart.js chartjs-plugin-hierarchical

Usage

see Examples

or at this Open in CodePen

Scale

a new scale type hierarchical.

Styling

The hierarchical axis scale has the following styling options

see IHierarchicalScaleOptions

Data structure

see ILabelNode and IValueNode

ESM and Tree Shaking

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

import { Chart } from 'chart.js';
import { HierarchicalScale } from 'chartjs-plugin-hierarchical';

// register scale in chart.js and ensure the defaults are set
Chart.register(HierarchicalScale);
...

Development Environment

npm i -g yarn
yarn install
yarn sdks vscode

Common commands

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs

developed by datavisyn.

chartjs
chartjs-bar
chartjs-plugin
grouping
hierachical
javascript
tree-structure

sgratzl/chartjs-plugin-hierarchical

Chart.js scale for hierarchical tree-like data structure

TypeScript

58

388 commits

updated Oct 4, 2025

See the code

README

Chart.js Hierarchical Scale Plugin

datavisyn NPM Package Github Actions

Chart.js module for adding a new categorical scale which mimics a hierarchical tree.

hierarchy

Check out also my other chart.js plugins:

Install

npm install --save chart.js chartjs-plugin-hierarchical

Usage

see Examples

or at this Open in CodePen

Scale

a new scale type hierarchical.

Styling

The hierarchical axis scale has the following styling options

see IHierarchicalScaleOptions

Data structure

see ILabelNode and IValueNode

ESM and Tree Shaking

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

import { Chart } from 'chart.js';
import { HierarchicalScale } from 'chartjs-plugin-hierarchical';

// register scale in chart.js and ensure the defaults are set
Chart.register(HierarchicalScale);
...

Development Environment

npm i -g yarn
yarn install
yarn sdks vscode

Common commands

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs

developed by datavisyn.

chartjs
chartjs-bar
chartjs-plugin
grouping
hierachical
javascript
tree-structure

Project health

Overall

2.5/10

Maintained

0/10

Code review

0/10
OpenSSF Scorecard

Latest release

4.4.5 · Oct 4, 2025

Releases this year

0