The example demonstrates how to create a combination of different Chart Areas and perform range selection (zooming) to a specific date-time range.

The top chart area is displaying the detailed (zoomed) view, while the bottom chart displays the whole range (all data for the time period). When you select a From - To Date range, the top chart will be updated and the bottom chart will highlight the selected range.

Chart Areas alignment on the right is achieved with custom code injection.

Range Selection Chart

 
 

Example Controls

From Date:
To Date: