Nevron logo
Nevron word

Chart Multiple Axes and Axis Docking

Working with Chart Multiple Axes – Nevron Chart Axis Docking


Having a chart with several Y axes is a requirement you will meet very often when you develop charting enabled applications. It is essential that a good charting product supports flexible Y axis positioning and layout. This white paper outlines the different options you have with Nevron Chart for .NET to address a variety of situations requiring you to use multiple Y axes.


Water Measurement on Single Axis

Fig. 1

The most common requirement is to have two Y axes and two series scaling on each of them. This is common when you need to compare two series of data that differ in magnitude or measurement, but you still want to have the ability to compare them visually in order to give the end user the ability to analyze trends or relations between the two. For example consider the following picture (Fig. 1) showing 120 days of imaginary water measurement:

It is clear that the user cannot properly analyze the two since water reserves differ in magnitude from water debit.

Water Measurement on Two Axes

Fig. 2

One solution would be to use a secondary axis for the debit data in order to show the two trends simultaneously:

On the second picture (Fig. 2), the debit measurement is shown on the secondary primary axis and is additionally rebased at 90. The code used to scale the debit area on the secondary Y axis is:

NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
secondaryY.Visible = true;

areaDebit.DisplayOnAxis(StandardAxis.PrimaryY, false);
areaDebit.DisplayOnAxis(StandardAxis.SecondaryY, true);

Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
secondaryY.Visible = True

areaDebit.DisplayOnAxis(StandardAxis.PrimaryY, False)
areaDebit.DisplayOnAxis(StandardAxis.SecondaryY, True)

Water Measurement on Two Axes Left Dock
Fig. 3

Note that the chart area has shrunk when the secondary Y axis is made visible. In certain cases you may want to have both axes on the same side of the chart. The following picture (Fig. 3) shows this:

In order to change the position of the SecondaryY axes you must modify its anchor:

NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
secondaryY.Visible = true;
secondaryY.Anchor = new

Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
secondaryY.Visible = True
secondaryY.Anchor = New

Now the secondary Y axis is docked on the left side to the primary Y (showing the range [0, 1200]).

Water Measurement on Two Axes Left Dock Color Coded

Fig. 4

The above chart needs another touch. When you dock several axes to a single axis dock zone (in the above case left zone) you may want to introduce some color coding linking the axes to the series that scale on them. This is necessary because the user cannot visually comprehend whether the debit scales from 90 to 115 or from 0 to 1200. The following picture (Fig. 4) shows how the axes are now color coded to match the content that scales on them:

Note that we also disabled the inner major ticks in the axes in order to save some space. This is achieved through the following code:

NAxis primaryY = (NAxis)chart.Axis(StandardAxis.PrimaryY);
NStandardScaleConfigurator primaryScaleY = primaryY.ScaleConfigurator as NStandardScaleConfigurator;
primaryScaleY.RulerStyle.BorderStyle.Color = Color.DarkOrange;
primaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.DarkOrange;
primaryScaleY.InnerMajorTickStyle.Length = new NLength(0);
primaryScaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.DarkOrange);

NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
NLinearScaleConfigurator secondaryScaleY = secondaryY.ScaleConfigurator as NLinearScaleConfigurator;
secondaryScaleY.RulerStyle.BorderStyle.Color = Color.Green;
secondaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.Green;
secondaryScaleY.InnerMajorTickStyle.Length = new NLength(0);
secondaryScaleY.UseOrigin = true;
secondaryScaleY.Origin = 100;
secondaryScaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.Green);

Dim primaryY As NAxis = chart.Axis(StandardAxis.PrimaryY)
Dim primaryScaleY As NStandardScaleConfigurator = CType(primaryY.ScaleConfigurator, NStandardScaleConfigurator)
primaryScaleY.RulerStyle.BorderStyle.Color = Color.DarkOrange
primaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.DarkOrange
primaryScaleY.InnerMajorTickStyle.Length = New NLength(0)
primaryScaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.DarkOrange)

Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
Dim secondaryScaleY As NLinearScaleConfigurator = CType(secondaryY.ScaleConfigurator, NLinearScaleConfigurator)
secondaryScaleY.RulerStyle.BorderStyle.Color = Color.Green
secondaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.Green
secondaryScaleY.InnerMajorTickStyle.Length = New NLength(0)
secondaryScaleY.UseOrigin = True
secondaryScaleY.Origin = 100
secondaryScaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.Green)
Nevron Chart can have an unlimited number of custom vertical and horizontal axes. You can specify the axis on which a particular series is scaled. When using axis docking you can also specify whether the axis will create a separate level in the dock zone or use the last created one. This allows you to have two or more axes in a zone level that share a percentage of the chart wall.


Nevron Chart for .NET fully supports charts with several X and Y axes and additionally allows you to customize a variety of options to get the desired result for your charts. Very few charting packages support docking several axes on the left or rights side of the chart area. More information on axis positioning is available in the Users Guide shipped with the fully functional evaluation of the Chart component.

About Nevron Software

Founded in 1998, Nevron Software is a component vendor specialized in the development of premium presentation layer solutions for .NET based technologies. Today Nevron has established itself as the trusted partner worldwide for use in .NET LOB applications, SharePoint portals and Reporting solutions. Nevron technology is used by many Fortune 500 companies, large financial institutions, global IT consultancies, academic institutions, governments and non-profits.
For more information, visit:

Customer Quotes:

QUOTE For a project currently under development I found myself in the need of a charting control for .NET and after much cruising the net I finally settled on and purchased the Nevron WinForms .NET Chart and I will be the first to admit that price played a great part in the original decision; but the more that I worked with the component the more I began to appreciate the thought and effort that the folks at Nevron had put into it.

There are two things that Nevron gets right with their chart component and they are:
- Samples (slash Help) - In the years that I have been coding and trying components that are suppose to make a developers life easier I have come to a conclusion that component developers either hate doing good help and sample projects - or they assume that you'll be smart enough to figure it out. Well excuse me but I'm using you component to speed up the development cycle not spend hours - or days - trying to figure out how to use the component. This is not the case with Nevron - in this area they excel as the sample projects include both C# and VB.NET and they are put together in such a way that there isn't anything about using the component that you can't figure out. My hat's off to them for this and a big resounding Thank You.
- Pricing - This has got to be one of my biggest beefs (next to help files :) ) that I have with component developers. They all seem to think that application and web developers have a corporate bank account behind them - well we don't and Nevron apparently has recognized this and in turn priced an excellently full featured charting control within the financial reach of small independent developers. They should be commended for this.
The Nevron Chart component has become a permanent part of my developer toolbox and I would have no qualms against recommended it to any other developer out there - corporate or independent.

So my suggestion is head over there (link at bottom of review) and grab a copy of their demo and see for yourself. I know you won't be disappointed.

Steven Hodson