DevExtreme React - Drill-Down Chart

A drill-down chart visualizes data on several hierarchical levels. Data is usually generalized on the first level, but it becomes more detailed with each level. This article describes the main steps you need to take to implement a drill-down chart using the Chart widget.

View Demo

Provide Data

Although a drill-down chart visualizes hierarchical data, the data source should be an array of plain objects, for example:

JavaScript
  • var population = [
  • { arg: "North America", val: 493603615, parentID: "" },
  • { arg: "South America", val: 331126555, parentID: "" },
  •  
  • { arg: "United States", val: 325310275, parentID: "North America" },
  • { arg: "Mexico", val: 121005815, parentID: "North America" },
  • { arg: "Canada", val: 36048521, parentID: "North America" },
  • { arg: "Cuba", val: 11239004, parentID: "North America" },
  •  
  • { arg: "Brazil", val: 205737996, parentID: "South America" },
  • { arg: "Colombia", val: 48400388, parentID: "South America" },
  • { arg: "Venezuela", val: 30761000, parentID: "South America" },
  • { arg: "Peru", val: 28220764, parentID: "South America" }
  • ];

The main idea is to filter the data source by the parentID for different drill-down views. You can create a function that does the filtering:

... or employ the DevExtreme DataSource object that provides an API for filtering:

Implement View Navigation

To navigate from the first to the second view, filter data by a different parentID in the Chart's onPointClick event handler. To navigate back, add the Button widget and reset the filter in the onClick event handler. Distinguish between levels using the isFirstLevel flag.

The following code shows how to implement navigation when using the DevExtreme DataSource:

Customize the Appearance

The Chart provides the customizePoint and customizeLabel functions specifically for changing individual point and label options. Any other widget options can be changed in the Chart's onPointClick event handler, but remember to change them back in the Button's onClick event handler.

This article outlined the steps to implement a drill-down chart and provided code examples for each step. For the full code, refer to the Drill-Down Chart demo.

View Demo