Chart.js module for creating treemap charts

Overview

chartjs-chart-treemap

Chart.js v3.6.0 module for creating treemap charts. Implementation for Chart.js v2 is in 2.x branch

npm release npm bundle size GitHub Quality Gate Status documentation

TreeMap Example Image

Documentation

You can find documentation for chartjs-chart-treemap at https://chartjs-chart-treemap.pages.dev/.

Development

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

> npm install

The following commands will then be available from the repository root:

> npm run build         // build dist files
> npm run dev           // build and watch for changes
> npm test              // run all tests
> npm run lint          // perform code linting
> npm package           // create an archive with dist files and samples

License

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

Comments
  • Add overflow option to labels configuration

    Add overflow option to labels configuration

    Fix #105

    This is PR is adding new option to labels configuration in order to control what happens to a label that is too big to fit into a rectangle.

    | Name | Type | Default | ---- | ---- | ---- | overflow| 'cut'|'hidden' | 'cut'

    The option can be set to:

    • 'cut' (default and the same behavior before this PR) if the label is too big, it will be cut to stay inside the rectangle.
    • 'hidden', the label is removed altogether if the rectangle is too small for it

    A boolean is not used because the option could also have another value, 'auto', addressing the issue #67

    TODO

    • [x] test cases
    • [x] type definitions update
    • [x] documentation
    enhancement 
    opened by stockiNail 22
  • Add formatter option

    Add formatter option

    Fixes #41 Fixes #24 Fixes #20

    Ref #38, #44

    This PR adds formatter options in order to format the label to show on the treemap elements.

    The PR changes also the label option defintion in order to be align to the dataset label option of all other controllers.

    enhancement 
    opened by stockiNail 15
  • Add element scope to controller options

    Add element scope to controller options

    This PR is addressing the issue related to the usage of element options to squarify the data. Currently the controller is using the configuration of the dataset, without any fallback, ignoring possible configuration and re-applying the defaults.

    This is a deviation from the CHART.JS scopes chain from Dataset level options to Dataset element level options.

    enhancement 
    opened by stockiNail 13
  • How to modify data labels?

    How to modify data labels?

    I have played with the treemap and got to this result: image

    But what I aim at is this: image

    Is is possible to modify the labels and set different sizes (maybe via a plugin?) Also, labels currently do not wrap (unless we wrap them manually by using arrays). You think this is something we have to stick with or it would be possible to also automatically wrap them somehow?

    enhancement 
    opened by AlvinSartorTrityum 12
  • Fix alignment, improve speed

    Fix alignment, improve speed

    Fix: #158

    Probably fixes #156 but needs to be tested

    A lot of fixtures needs to be updated (again, did it once already), will continue with this tomorrow.

    bug performance 
    opened by kurkle 10
  • Fix the rectangles size calculation aligning to bar element logic

    Fix the rectangles size calculation aligning to bar element logic

    FIX #126

    This is PR is fixing definitely the rectangles size calculation leveraging on the copy of Chart.js BarElement code, where borderWidth (as object) and borderRadius are correctly managed.

    This also simplifies some parts of the code and re-enables the borderRadius as scriptable options.

    t1

    TODO

    • [x] waiting for #127 and #128
    enhancement refactoring 
    opened by stockiNail 10
  • Scriptable options for dataset properties invoked before element initialization

    Scriptable options for dataset properties invoked before element initialization

    During the update, the controller is using some dataset options which are not leveraging on the treemap element (because not initialized), for the scriptable options.

    At the moment, these properties are mainly used to calculate the space for the caption and can not be defined as callback.

    I think these options should be consumed even if they are defined as scriptable options.

    The context should slightly different form the data context and maybe a specific context object should be implemented.

    The following are the options in scope:

    | options | :- | dataset.spacing | dataset.borderWidth | dataset.borderRadius (probably, when PR #114 will be merged, needed to improve the sub-rect calculation) | dataset.captions.font | dataset.captions.padding

    enhancement 
    opened by stockiNail 8
  • How to display nested / hierarchical data?

    How to display nested / hierarchical data?

    The documentation states:

    The treemap chart provides a method for displaying hierarchical data using nested rectangles.

    Everything works fine with flat / single-depth data, but I am having trouble understanding how to make a hierarchical structure work.

    I've studied the examples (sample/ directory) but they've not given me enough insight :disappointed:

    Simplified, the data I have is:

    • A (50% through children)
      • C (25% through children)
        • C1 (12.5% through children)
          • C1a: 6.25%
          • C1b: 6.25%
        • C2: 12.5%
      • D: 25%
    • B: 50%

    This should give a Treemap similar to this:

        +-------+------+-------+------+
        |  C1a  |      |              |
        +-------+  C2  |              |
        |  C1b  |      |              |
        +-------+------+      B       +
        |              |              |
        |       D      |              |
        |              |              |
        +-------+------+-------+------+
    

    The only thing I have found is to keep adding groups:

    [
      {"name": "A",   "l0": "/", "l1": "A", "l2":  "",  "l3":   "", "l4":    "", "value":  0},
      {"name": "B",   "l0": "/", "l1": "B", "l2":  "",  "l3":   "", "l4":    "", "value": 50},
      {"name": "C",   "l0": "/", "l1": "A", "l2": "C",  "l3":   "", "l4":    "", "value":  0},
      {"name": "C1",  "l0": "/", "l1": "A", "l2": "C",  "l3": "C1", "l4":    "", "value":  0},
      {"name": "C1a", "l0": "/", "l1": "A", "l2": "C",  "l3": "C1", "l4": "C1a", "value":  6.25},
      {"name": "C1b", "l0": "/", "l1": "A", "l2": "C",  "l3": "C1", "l4": "C1b", "value":  6.25},
      {"name": "C2",  "l0": "/", "l1": "A", "l2": "C",  "l3": "C2", "l4":    "", "value": 12.5},
      {"name": "D",   "l0": "/", "l1": "A", "l2": "D",  "l3":   "", "l4":    "", "value": 25}
    ]
    

    But that looks like a hack to me, which would indicate that there is probably a better way to do this?

    I've got a CodePen with what I have thus far: https://codepen.io/potherca/pen/qBVXmRz

    Any help would be much appreciated!

    enhancement 
    opened by Potherca 8
  • Use resolved dataset options instead of dataset configuration

    Use resolved dataset options instead of dataset configuration

    This PR is using the resolved dataset options instead of dataset configuration in order to leverage on fallback to element options.

    This also adds key, groups and treeLeafKey options to chart option for the same reason.

    TODO

    • [ ] Wait for #144
    opened by stockiNail 7
  • hoverColor property for captions and labels not working

    hoverColor property for captions and labels not working

    So hoverColor property for captions and labels not working. Color field works as expected but hoverColor is not. I found that using a function it is being called but the return value make nothing.

    bug 
    opened by GrandMagus02 7
  • Evaluate to remove borderWidth configured as object

    Evaluate to remove borderWidth configured as object

    borderWidth option is configurable as number and as object ({top, right, bottom, left}).

    The borderWidth as object enables the feature to have different borderWidth for each side of the box but it's adding complexity to manage other border options (like borderRadius) and also in the calculation of the space, both rect element and labels.

    Currently the boxes with borderWidth as object are drawn overlapping the rectangles. This is disabling some additional border options for lineDash, joint and cap style.

    Maybe we could evaluate if makes sense to leave or remove it. Or to find out a way (maybe having a look to CHART.JS project where the BarElement can manage the borderWidth as object as well. Maybe TreemapElement can extend BarElement.

    enhancement 
    opened by stockiNail 6
  • Not able to create treemap

    Not able to create treemap

    Uncaught SyntaxError: Cannot use import statement outside a module chartjs-adapter-date-fns.bundle.js:6225 Uncaught TypeError: Cannot read properties of undefined (reading '_adapters') at chartjs-adapter-date-fns.bundle.js:6225:10 at chartjs-adapter-date-fns.bundle.js:4:76 at chartjs-adapter-date-fns.bundle.js:5:2 chartjs-chart-treemap.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND chartjs-chart-treemap.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'helpers') at chartjs-chart-treemap.js:10:149 at chartjs-chart-treemap.js:11:2 basic.html:33 Uncaught ReferenceError: Chart is not defined at HTMLScriptElement. (basic.html:33:27)

    After changing type to module

    Uncaught SyntaxError: Cannot use import statement outside a module chartjs-adapter-date-fns.bundle.js:6225 Uncaught TypeError: Cannot read properties of undefined (reading '_adapters') at chartjs-adapter-date-fns.bundle.js:6225:10 at chartjs-adapter-date-fns.bundle.js:4:76 at chartjs-adapter-date-fns.bundle.js:5:2 chartjs-chart-treemap.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND chartjs-chart-treemap.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'helpers') at chartjs-chart-treemap.js:10:149 at chartjs-chart-treemap.js:11:2 basic.html:33 Uncaught ReferenceError: Chart is not defined at HTMLScriptElement. (basic.html:33:27)

    help wanted 
    opened by Shriniket33 6
  • Add CHART.JS v4 compatibility

    Add CHART.JS v4 compatibility

    Fix #164

    • [ ] solve a couple of TS types issues.
    • [ ] chartjs-adapter-date-fns not compatible with CHART-JS 4 yet.
    • [ ] chart-plugin-datalabels not compatible with CHART-JS 4 yet
    enhancement 
    opened by stockiNail 6
  • Upgrading Chart.JS to version 4.x,  treemap throws error

    Upgrading Chart.JS to version 4.x, treemap throws error

    There's a new Chart.JS version 4x. Upgrading that, I get the following error from treemap-chart

    Screenshot 2022-11-15 at 13 56 50

    My line 11

        Chart.register(TreemapController, TreemapElement);
    
    bug 
    opened by dannypk 0
  • Element width and height set to 0

    Element width and height set to 0

    Having a scriptable options, I'm expecting that the element instance in the context contains the element with all its properties well set.

    In this codepen https://codepen.io/stockinail/pen/bGKRLza (see console), you can see that the element is providing always width and height 0.

    ~~This should be caused by the following code:~~

    ~~When the chart is invoked with reset the width and height are always to 0.~~

    This is also happening when you access to the options by getProps method:

    .getProps(['width', 'height'])

    or .getProps(['width', 'height'], true)

    EDIT: not related to that code

    bug 
    opened by stockiNail 1
  • Move options to dataset controller configuration

    Move options to dataset controller configuration

    Some options are currently defined at element level:

    | Name | Description | ---- | ---- | label | The label for the dataset which appears in the legend and tooltips. | rtl | If true, the treemap elements are rendering from right to left. | spacing | Fixed distance (in pixels) between all treemap elements.

    They cannot be changed depending on the element therefore could make sense to move to controller configuration

    breaking change 
    opened by stockiNail 0
  • Enable additional keys option to sum more than one key when data are grouped

    Enable additional keys option to sum more than one key when data are grouped

    Fix #47

    New additionalKeys option could be an array of keys of the objects used in tree and consumed grouping the data. The result of sums of these additional keys will be stored in data object in vs key as object, where the keys are the same that additionalKeys option has provided.

    {
      "x": 0,
      "y": 32,
      "w": 714,
      "h": 682,
      "a": 486948,
      "v": 50,
      "vs": {
        "pop": 40
      },
      "s": 50,
      "g": "A",
      "l": 0
    }
    

    TODO

    • [x] test cases
    • [x] types
    • [x] documentation
    enhancement 
    opened by stockiNail 3
Releases(v2.1.3)
Owner
Jukka Kurkela
Programmer of various languages and architectures since 1980's
Jukka Kurkela
Chart.js module for creating sankey diagrams

chartjs-chart-sankey Chart.js v3.3.x module for creating sankey diagrams Browser support All modern and up-to-date browsers are supported, including,

Jukka Kurkela 79 Nov 14, 2022
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Nov 29, 2022
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 54 Oct 20, 2022
Beautiful charts for Angular based on Chart.js

ng2-charts slack Beautiful charts for Angular based on Chart.js Usage & Demo Samples using ng2-charts https://valor-software.com/ng2-charts/ Installat

Valor Software 2.2k Nov 22, 2022
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 72 Nov 9, 2022
Chart.js Box Plots and Violin Plot Charts

Chart.js Box and Violin Plot Chart.js module for charting box and violin plots. This is a maintained fork of @datavisyn/chartjs-chart-box-and-violin-p

Samuel Gratzl 56 Nov 21, 2022
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 172 Nov 18, 2022
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 22 Nov 15, 2022
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Nov 17, 2022
JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Kirill Stepkin 42 Oct 25, 2022
JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Kirill Stepkin 42 Oct 25, 2022
Chart.js module for charting financial securities

Chart.js Financial Charting Chart.js module for Candlestick and OHLC charts Roadmap Chart.js 2.7.0 added our timeseries scale as new option called dis

Chart.js 620 Nov 14, 2022
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 58.8k Nov 22, 2022
Simple responsive charts

Big welcome by the Chartist Guy Checkout the documentation site at http://gionkunz.github.io/chartist-js/ Checkout this lightning talk that gives you

Gion Kunz 21 Nov 20, 2022
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos ยป Edit at CodePen ยป Contents Installation U

Frappe 14.6k Nov 28, 2022
๐Ÿ“Š A highly interactive data-driven visualization grammar for statistical charts.

English | ็ฎ€ไฝ“ไธญๆ–‡ G2 A highly interactive data-driven visualization grammar for statistical charts. Website โ€ข Tutorial Docs โ€ข Blog โ€ข G2Plot G2 is a visua

AntV team 11.4k Nov 23, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.5k Nov 22, 2022