[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Charting Basics
   [Expand]Series Views
   [Expand]Chart Elements
   [Expand]Providing Data
   [Expand]Data Representation
   [Expand]Appearance Customization
   [Expand]End-User Features
   [Expand]Design-Time Features
   [Expand]Visual Elements
    [Expand]Creating Charts
    [Expand]Chart Elements
    [Collapse]End-User Interaction
      How to: Implement a Custom Series Animation
      How to: Implement a Custom Pie Animation
      How to: Implement a Custom Bar Animation
      How to: Implement a Custom Marker Animation
      How to: Implement a Custom Funnel Animation
      How to: Determine which Chart Element the Mouse Pointer Hovers Over
      How to: Determine which Series Point Is Under the Test Point
      How to: Use Chart Tooltips
      How to: Show Information from a Datasource Field in a Crosshair Cursor Label
      How to: Show Series Labels Only for Hot-tracked Points
      How to: Implement Custom Hot-Tracking and Selection
      How to: Provide a Custom Cursor for a Chart
      How to: Provide Interactive Editing for Series Points
      How to: Provide Interactive Editing for a Constant Line
      How to: Create a Drill-Down Chart
      How to: Perform an Action When Series Points are Selected
      How to: Format Values in a Crosshair Cursor via a Label's Patterns
      How to: Make a Diagram Scrollable and Limit the Visual and Whole Range of Its Axis
      How to: Individually Adjust Axes Scrolling (Runtime Sample)
      How to: Individually Adjust Axes Zooming (Runtime Sample)
      How to: Customize the Secondary Axis Range When Chart Zooming is Performed
      How to: Customize Grid Lines, Grid Snapping of the Chart Range Control Client
      How to: Invoke the Chart Wizard at Runtime
      How to: Change the Page Order in a Wizard
      How to: Add a New Page to a Wizard
      How to: Hide Certain Tabs on a Wizard's Page
      How to: Invoke the Chart Designer at Runtime
    [Expand]Producing Output
   [Expand]Additional Resources
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Create a Drill-Down Chart


The approach demonstrated in this topic is outdated. Refer to the Drill Down document for instructions on how to create a drill-down chart.

This tutorial demonstrates how to create a drill-down chart, to display master-detail data in the same chart. Two series are used to achieve this. By clicking a point of the first series, another series is shown, which represents detailed data related to the selected point.


The complete sample project is available in the DevExpress Code Central database at How to create a drill-down chart (for WinForms) and How to implement a multi-dimensional DrillDown feature (for ASP.NET). There, you can either run this example online or download an auto-executable sample.

To create a drill-down chart, do the following.

Expanded Create a Chart and Bind it to Data

  1. Start MS Visual Studio (2008 or 2010), and create a new Windows Forms Application, or open an existing one.
  2. Add a chart to the form.
  3. Bind the chart to the "SalesPerson" view of the sample nwind.mdb file. For step-by-step guidance on this, perform steps 1-7 of the following tutorial (How to: Bind Individual Chart Series to Data).
  4. To create series, click the chart's smart tag, and choose Series... in its actions list. Then, the Series Collection Editor will be invoked.

    In this dialog, click Add..., to create the first series of the Pie view type.

    Switch to the dialog's Properties tab, and for this series, set the Series.DataSource property to salesPersonBindingSource, SeriesBase.ArgumentDataMember property to SalesPerson, and the SeriesBase.SummaryFunction to SUM([Extended Price]).

  5. Now, add the second series - of the Bar view type. You'll see the red notification informing you that this view is incompatible with the first visible series in the collection. So, leave the SeriesBase.Visible property of this series disabled - we'll replace both series later in code.

    The same as for the first series, set its Series.DataSource property to salesPersonBindingSource, SeriesBase.ArgumentDataMember property to CategoryName, and SeriesBase.SummaryFunction - to SUM([Extended Price]).

    In addition, via the SeriesBase.DataFilters property of the Bar series, specify a data filter, whose DataFilter.ColumnName property is set to SalesPerson.

Expanded Customize the Chart

  1. To add Chart Titles, select the chart, and click the ellipsis button for its ChartControl.Titles property.

    In the invoked Chart Title Collection Editor, click Add, to create a title. Set its Title.Text property to "Back to the main view...", and the TitleBase.Visible property to false.

    Add another chart title ( with the "Sales by Person" text), and leave it visible.

  2. For the first (Pie) series, set its PointOptions.ValueNumericOptions property to Percent.

    And in its SeriesBase.LegendPointOptions property, disable the PercentOptions.ValueAsPercent property, and set the PointOptions.PointView property to Argument.

  3. To enable a Hit-testing functionality at runtime, set the ChartControl.RuntimeHitTesting property value to true.

Expanded Handle Its MouseClick event

Now, it's only left to handle the chartControl1.MouseClick event. Write the following code.

Expanded Get the Result

The result is shown in the following image.

Expanded See Also

Is this topic helpful?​​​​​​​