Click here to Skip to main content
12,821,315 members (35,748 online)
Click here to Skip to main content
Add your own
alternative version


55 bookmarked
Posted 3 Apr 2012

MSChart Extension - Zoom and Pan Control

, 19 Jul 2012 MIT
Rate this:
Please Sign up or sign in to vote.
Implement Zoom and Pan Controls for MSChart

Also available in NuGet and GitHub.


This article describe an extension class named "MSChart Extension" which created to extend functionality of Microsoft Chart (MSChart) control in Visual Studio for WinForms applications.


Microsoft Chart (MSChart) in Visual Studio is a great Windows Forms (WinForms) controls to create chart for standalone application. However, there are several features that could be added and improved to make this controls more user friendly.

Zooming and panning are two common feature for chart when dealing with large amount of data. Unfortunately, there are no easy way to have these two features enabled with MSChart. Although there is a built in Zoom controls, it is not very user friendly which described below. On the other hand, panning is not available. Search around web but didn't find any reliable solutions.

I tried to implement these two features in MSChart by writing custom codes and YES it is possible. Instead of copy and paste the same piece of code over and over again to every single project that I need, I created this MSChart Extension class which put all these additional features in a separated assembly which can be simply add as reference when needed.

Features List

  • Fast Clear Data
  • Windowed Zoom in and Zoom Out
  • Pan
  • Show / hide series
Fast Clear Data

MSChart has a known problem which impact most of the users which is the speed of clearing data points. This become worst when dealing with large amount of data. Workaround for this solution had been published by Microsoft and users around the web to fix this problem. (Original Link)

An extension method of this function is implemented in MSChart extension as below.

internal static class MSChartExtension
    public static void ClearPoints(this Series sender)
        while (sender.Points.Count > 0)
            sender.Points.RemoveAt(sender.Points.Count - 1);
        sender.Points.Clear(); //NOTE 1

Note 1: I added one additional line Points.Clear() at the end of the function to ensure the chart axis updated correctly on next plot. Without adding this line, I observed that previous axis settings will be used when plotting new data points right after calling ClearPoints().

To use this feature, one just need to call ClearPoints() from chart series.

//Clear Data Points (Extension)
Windowed Zoom

This is a improvement version of zoom control with zoom out (full view) instead of using built in zoom control in MSChart. The main reason for recreate this feature is because zooming out is really a pain where need to zoom out each axis separately by clicking a button on the axis by number of time that I zoomed in. Moreover, the built in controls does not seems to works well with annotations.

Notes: Zoom out function is available in pop up menu when chart is zoomed.


Panning allowed user to move zoomed window using mouse. This is much better than moving the horizontal and vertical scroll bar.

Show / Hide Series

Sometimes it is necessary to plot chart with multiple series for data comparison. However, it would not be easy to visualize the data for each individual series when we have multiple series overlapping each other. Show and hide series function provide a flexibility to hide each series as you wish. MSChart extension will automatically detect number of series used in chart, no setup is required to use this feature. Each series can be hide / show from context menu.

Annotations (Version 1.2.0)
Extensions methods to create chart annotations are added in Version 1.2.0 as below.
  • DrawHorizontalLine
  • DrawVerticalLine
  • DrawLine
  • DrawRectangle
  • DrawText

The standard way to add an annotation to MSChart in run-time is create an annotation object and add it to the annotation list of the chart. Adding one annotation normally involve several lines of codes as we need to overwrite some of those default properties in order to show the annotation correctly in the chart.

With the extension methods provided above, adding annotation can be easily done in single function call. Colors, line weight, line style and position are exposed as input parameters.
Functions listed above are just few of the commonly used annotation type. You may create similar function for other types of annotation using the similar methods.

NOTE: Please note that these functions are created to add annotation to first chart area with primary axis.

Codes below shows an example of adding horizontal line to chart. <span style="font-family: "Courier New",Courier,monospace;">ClipToChartArea</span>, AxisXName, <span style="font-family: "Courier New",Courier,monospace;">YAxisName</span>, and <span style="font-family: "Courier New",Courier,monospace;">IsInfinite </span>are properties that we need to overwrite its default values. <span style="font-family: "Courier New",Courier,monospace;">AxisXName </span>and <span style="font-family: "Courier New",Courier,monospace;">YAxisName </span>are hidden properties which is not visible in IntelliSense.

Custom annotation name should only be assigned after annotation was added to annotation list. This is because the <span style="font-family: "Courier New",Courier,monospace;">Name </span>property will be overwrite with auto generated value when adding the object to annotation list. 

 public static void DrawHorizontalLine(this Chart sender, double y,
    Drawing.Color lineColor, string name = "",
    int lineWidth = 1, ChartDashStyle lineStyle = ChartDashStyle.Solid)
    HorizontalLineAnnotation horzLine = new HorizontalLineAnnotation();
    string chartAreaName = sender.ChartAreas[0].Name;
    horzLine.ClipToChartArea = chartAreaName;
    horzLine.AxisXName = chartAreaName + "\\rX";
    horzLine.YAxisName = chartAreaName + "\\rY";
    horzLine.IsInfinitive = true;
    horzLine.IsSizeAlwaysRelative = false;

    horzLine.Y = y;
    horzLine.LineColor = lineColor;
    horzLine.LineWidth = lineWidth;
    horzLine.LineDashStyle = lineStyle;

    if (!string.IsNullOrEmpty(name)) horzLine.Name = name;

Using the code  

To use this extension package, simply add MSChart assembly to reference of the project. Additional features and dedicated context menu can be enabled by the following function call.

private void AttachChartControl()
    //Enable Extension Functions and Context Menu
    myChart.EnableZoomAndPanControls(ChartCursorSelected, ChartCursorMoved);

private void ChartCursorSelected(double x, double y)
    txtChartSelect.Text = x.ToString("F4") + ", " + y.ToString("F4");
private void ChartCursorMoved(double x, double y)
    txtChartValue.Text = x.ToString("F4") + ", " + y.ToString("F4");

ChartCursorSelected and ChartCursorMoved are two optional callback to notify parent when chart coordinate changed. ChartCursorSelected will be called when a point in chart area is selected whereas ChartCursorMoved will trigger when mouse is move in chart area. x and y values in these two call backs are values for X-Axis and Y-Axis. It is hard coded to use primary axis at this moment.

This operation is reversible by calling the following function.

//Disable Extension Functions and restore chart settings

MSChart Extension come with a built in pop up menu which allow user to use features such as zoom and pan controls during run-time. All functions such as zoom, pan, select and series hide / show can be access from context menu. This context menu is shown when right click mouse in chart with Zoom and Pan controls enabled as show above.

Future Improvement 

  • Add option to select between primary / secondary axis for Select tool and callback functions.
  • Append MSChart Extension's context menu to user defined context menu if exists.
  • Implement 2 cursor to calculate different between 2 points.


  • 03/04/2012: Initial release. (Version 1.0.0)
  • 04/04/2012: (Update) Added callback function's description and Future improvement list.
  • 18/07/2012: (Update) Added Annotation Functions. (Version 1.2.0)
  • 19/07/2012: Fixed download package.


This article, along with any associated source code and files, is licensed under The MIT License


About the Author

Code Artist
Technical Lead
Malaysia Malaysia
Official Page:

You may also be interested in...

Comments and Discussions

GeneralRe: Cursors Pin
Member 99641234-Apr-13 3:29
memberMember 99641234-Apr-13 3:29 
GeneralThanks Pin
Member 994197626-Mar-13 2:41
memberMember 994197626-Mar-13 2:41 
GeneralRe: Thanks Pin
Code Artist26-Mar-13 4:19
memberCode Artist26-Mar-13 4:19 
GeneralMy vote of 5 Pin
Member 994197626-Mar-13 2:38
memberMember 994197626-Mar-13 2:38 
QuestionHow to remove red selection cross Pin
Dominic Frank12-Dec-12 12:27
memberDominic Frank12-Dec-12 12:27 
AnswerRe: How to remove red selection cross Pin
Code Artist13-Dec-12 4:42
memberCode Artist13-Dec-12 4:42 
Questionenabling in Pin
Member 962865026-Nov-12 8:06
memberMember 962865026-Nov-12 8:06 
AnswerRe: enabling in Pin
Code Artist28-Nov-12 5:00
memberCode Artist28-Nov-12 5:00 
Hi Thomas,

First of all you need to Import the System.Windows.Forms.DataVisualization.Charting to your code. This is the namespace where the MSChartExtension stored.

Attached below sample code in VB.NET

Imports System.Windows.Forms.DataVisualization.Charting

Public Class Form1
    Public Sub New()

        ' This call is required by the designer.

        ' Add any initialization after the InitializeComponent() call.
    End Sub
    Private Sub Form1_Shown(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Shown
        Chart1.EnableZoomAndPanControls(AddressOf SelectionChanged, AddressOf CursorMoved) 'Extension method
        Chart1.Series(0).ClearPoints() 'Extension method
        For x As Integer = 0 To 100
    End Sub

    Private Sub SelectionChanged(ByVal x As Double, ByVal y As Double)
        Debug.WriteLine("Selection = " + x.ToString() + ", " + y.ToString())
    End Sub

    Private Sub CursorMoved(ByVal x As Double, ByVal y As Double)
        Debug.WriteLine("Cursor = " + x.ToString() + ", " + y.ToString())
    End Sub
End Class

Hope this helps.
Code Artist

GeneralRe: enabling in Pin
Member 962865029-Nov-12 10:33
memberMember 962865029-Nov-12 10:33 
QuestionDecimals on zoom Pin
WormholeX12-Oct-12 16:04
memberWormholeX12-Oct-12 16:04 
AnswerRe: Decimals on zoom Pin
Code Artist12-Oct-12 20:07
memberCode Artist12-Oct-12 20:07 
GeneralRe: Decimals on zoom Pin
WormholeX17-Dec-12 16:13
memberWormholeX17-Dec-12 16:13 
GeneralRe: Decimals on zoom Pin
Code Artist18-Dec-12 4:11
memberCode Artist18-Dec-12 4:11 
QuestionCan I use this extention in Logarithmic chart?? Pin
Mr Hwang20-Sep-12 20:36
memberMr Hwang20-Sep-12 20:36 
AnswerRe: Can I use this extention in Logarithmic chart?? Pin
Code Artist21-Sep-12 4:19
memberCode Artist21-Sep-12 4:19 
QuestionHow to implement Pin
Member 941943720-Sep-12 8:27
memberMember 941943720-Sep-12 8:27 
AnswerRe: How to implement Pin
Code Artist21-Sep-12 3:58
memberCode Artist21-Sep-12 3:58 
GeneralRe: How to implement Pin
Member 941943721-Sep-12 8:56
memberMember 941943721-Sep-12 8:56 
GeneralRe: How to implement Pin
Code Artist21-Sep-12 23:22
memberCode Artist21-Sep-12 23:22 
GeneralRe: How to implement Pin
Member 941943724-Sep-12 8:25
memberMember 941943724-Sep-12 8:25 
GeneralRe: How to implement Pin
Code Artist25-Sep-12 5:38
memberCode Artist25-Sep-12 5:38 
Questionis this code right? Pin
Mr Hwang12-Sep-12 7:02
memberMr Hwang12-Sep-12 7:02 
AnswerRe: is this code right? Pin
Code Artist13-Sep-12 4:14
memberCode Artist13-Sep-12 4:14 
QuestionThere is no download! Pin
Mizan Rahman19-Jul-12 1:44
memberMizan Rahman19-Jul-12 1:44 
AnswerRe: There is no download! Pin
Code Artist19-Jul-12 5:41
memberCode Artist19-Jul-12 5:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170308.1 | Last Updated 19 Jul 2012
Article Copyright 2012 by Code Artist
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid