Ngx-charts: Tree-map component should support hierarchical data.

Created on 24 Jan 2017  路  3Comments  路  Source: swimlane/ngx-charts

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior
The tree-map component currently only displays one level of a hierarchy (the root node, and immediate children).

Expected behavior
If the data passed to a tree-map component contains nodes that have children, they should be rendered appropriately.

What is the motivation / use case for changing the behavior?
Tree-maps are generally used to display a hierarchy.

Accept PRs New Feature Moderate Backlog

Most helpful comment

Is there anywhere the sources of https://swimlane.github.io/ngx-charts/#/ngx-charts/tree-map-demo? I wasn't able to reproduce the interactive tree map with the infos provided on https://swimlane.gitbooks.io/ngx-charts/content/charts/tree-map.html

All 3 comments

https://swimlane.github.io/ngx-charts/#/tree-map-demo shows how to do this.

Is there anywhere the sources of https://swimlane.github.io/ngx-charts/#/ngx-charts/tree-map-demo? I wasn't able to reproduce the interactive tree map with the infos provided on https://swimlane.gitbooks.io/ngx-charts/content/charts/tree-map.html

The demo is using ngx-charts-treemap, is there any demo using the ngx-charts-tree-map-cell-series? I would like to extend the TreeMapComponent so that it can take an input treemap data with children using ngx-charts-tree-map-cell-series as follow

<ngx-charts-chart
  [view]="[width, height]"
  [showLegend]="false"
  [animations]="animations">
  <svg:g [attr.transform]="transform" class="tree-map chart">
    <svg:g ngx-charts-tree-map-cell-series
           [colors]="colors"
           [data]="data"
           [dims]="dims"
           [tooltipDisabled]="tooltipDisabled"
           [tooltipTemplate]="tooltipTemplate"
           [valueFormatting]="valueFormatting"
           [labelFormatting]="labelFormatting"
           [gradient]="gradient"
           [animations]="animations"
           (select)="treemapSelect($event)"
    />
  </svg:g>
</ngx-charts-chart>
Was this page helpful?
0 / 5 - 0 ratings