DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Charts - Drill Down

If you bind a TreeMap to a data source with a hierarchical structure, you can enable drill-down and drill-up functionality:

  • "Drill down" means navigate to a more detailed view.
  • "Drill up" means navigate back up a level.
To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
www.wikipedia.org
Backend API

In this demo, you can click/tap a group of TreeMap tiles to drill down. Once you go down a level, navigation links appear at the top of the TreeMap. Use them to drill back up. To implement this technique, follow the steps below:

  1. Set the interactWithGroup property to true to force the control to hot-track entire groups instead of individual items.

  2. Call the node.drillDown method in the TreeMap onClick handler.

  3. To enable drill-up functionality, generate links in the onDrill handler. Call the node.drillDown method on link clicks. Inspect the code below for implementation details.