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
  • 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
  • Dividers option to be removed

    Dividers option to be removed

    Discussed in https://github.com/kurkle/chartjs-chart-treemap/discussions/170

    Originally posted by stockiNail December 12, 2022 Having a look to the dividers option, it is not clear to me if the current bahvior is the wished one or not.

    At the moment, setting the dividers option, the box is splitted by 2, ignoring the amount of subelements.

    In the sample (https://chartjs-chart-treemap.pages.dev/samples/dividers.html), the passed data are the following:

    const data = [
      {category: 'main', value: 1},
      {category: 'main', value: 2},
      {category: 'main', value: 3},
      {category: 'other', value: 4},
      {category: 'other', value: 5},
    ];
    

    and my expectation, maybe wrong, grouping by category, is to have 2 boxes with 2 dividers for main and 1 for other. Instead, there is 1 divider for main and 1 for other.

    breaking change 
    opened by stockiNail 0
  • Tree and data must be overridden in order to update the chart

    Tree and data must be overridden in order to update the chart

    Discussed in https://github.com/kurkle/chartjs-chart-treemap/discussions/171

    Originally posted by stockiNail December 12, 2022 Going to the last version, I have discovered that if you change the values of the tree (or data) without instantiating new object (or array), the chart will not be updated.

    This is because the tree is stored in the controller and checked with new one at every update:

    https://github.com/kurkle/chartjs-chart-treemap/blob/f6a7af1e15e21adafcb9b8ba502cf6f3acd3988f/src/controller.js#L112

    Maybe it's implemented as designed. But maybe it could be better to check not the instance but the content of the tree.

    bug 
    opened by stockiNail 0
  • 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
  • Merge the captions and labels drawing

    Merge the captions and labels drawing

    Currently the captions and labels drawing have got 2 different implementations.

    They are slightly different but they could merge in common implementation.

    refactoring 
    opened by stockiNail 0
  • Remove tree option using only data one

    Remove tree option using only data one

    Fro @kurkle https://github.com/kurkle/chartjs-chart-treemap/pull/121#issuecomment-1258534332

    Remove tree option to pass the data to the chart but only data option, like all other charts.

    breaking change 
    opened by stockiNail 3
Releases(v2.2.0)
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 85 Jan 2, 2023
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 Dec 13, 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 56 Dec 17, 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 Jan 4, 2023
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 73 Dec 1, 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 61 Dec 14, 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 177 Jan 4, 2023
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
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 24 Dec 12, 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 Jan 4, 2023
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 630 Dec 29, 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 59.4k Jan 7, 2023
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 26 Dec 30, 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 Jan 4, 2023
๐Ÿ“Š 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.5k Dec 30, 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.6k Dec 30, 2022