Version

Configuring Major and Minor Intervals

Topic Overview

Purpose

This topic explains, with code examples, how to configure the major and minor intervals for chart axes of the UltraDataChart™ control.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

The UltraDataChart control requires a Data set and data binding. This topic demonstrates how to provide a simple Data Object Model.

This topic introduces the types of axes supported by the UltraDataChart control.

Configuring Axis Minor Intervals

Feature Summary

In the UltraDataChart control, axis major interval specifies how frequent major gridlines and axis labels are rendered on an axis. Similarly, axis minor interval specifies how frequent minor gridlines are rendered on an axis.

Major and minor intervals are supported on all numeric and category, including:

The following screenshot displays a major interval on the NumericYAxis, using major interval value of 10, with a green stroke; and a minor interval on the NumericYAxis, using minor interval value of 2.5, with a red stroke.

DataChart Configuring Major and Minor Intervals 1.png

Axis major and minor intervals are implemented by setting the Interval and MinorInterval properties on an axis to a value greater than zero. In order to display minor gridlines that correspond to minor interval, one needs to set MinorStroke and MinorStrokeThickness properties on the axis, (as minor gridlines do not have a default color or thickness, and they will not be displayed without first assigning them).

Design Considerations

The following table maps the desired effects expressed by the minor interval with property changes necessary to obtain them.

In order to configure: Use this property And set it to:

The frequency of major interval gridlines.

This value provides adequate spacing for axis labels and major gridlines, if used. Note that the interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval.

On category axes, this value is represented as index between first item and last category item. Generally, this value should equal to 10-20% of total numbers of category items so that all axis labels fit on axis so that they are not clipped by other axis labels.

On numeric axes, this value is represented as double between axis minimum value and axis maximum value. By default, numeric axes will automatically calculate and find a nice and round interval based on axis minimum values and maximum value.

On date time axes, this value is represented as time span between axis minimum value and axis maximum value.

The color of the major interval gridlines.

A color of axis major gridlines.

The thickness of the major interval gridlines.

A thickness in pixels of the axis major gridlines set as a double value

The frequency of minor interval gridlines.

This value provides adequate spacing for minor gridlines, which are always rendered between major gridlines. As result, a value of MinorInterval property should always be much smaller (usually 2-5 time smaller) than the value of major Interval property of an axis.

On category axes, this value is represented as fraction of major Interval property. Generally, this value should equal to between 0.25 and 0.5

On numeric axes, this value is represented as double between axis minimum value and axis maximum value. By default, numeric axes will not automatically calculate minor interval based on axis minimum values and maximum value.

On date time axes, this value is represented as time span between axis minimum value and axis maximum value. Infragistics.Win.DataVisualization.UltraDataChart~Infragistics.Win.DataVisualization.numericxaxis_members.html

The color of the minor interval gridlines.

A color of axis minor gridlines.

The thickness of the minor interval gridlines.

A thickness in pixels of the axis minor gridlines set as a double value

Performance Impact

Axis major and minor intervals have the following performance impact on the chart control.

Setting very small value (compared to axis range) for major Interval property will cause chart to render many major gridlines and thus might decrease performance depending on range of axis or when a user is interacting with the chart by zooming or panning. It is recommended to not set this property and let chart automatically calculate appropriate major interval. Also, setting major Interval property will prevent rendering of axis labels and major gridlines when a user zoom in such that the axis range is less than a value of major Interval property. However, the chart will automatically re-calculate major Interval property if property is not set and a user zoom in such that the axis range is less than a value of this property.

Setting very small value (compared to axis range) for MinorInterval property will cause chart to render many minor gridlines and thus decrease performance even more than setting for major Interval property. This might be noticeable by a user is interacting with the chart by zooming or panning.

Example using NumericYAxis

The screenshot below demonstrates how the NumericYAxis in a UltraDataChart control looks as a result of the following interval related settings:

Property Value

MinorInterval

2.5

MinorStroke

Red

MinorStrokeThickness

1

Interval

10

MajorStroke

Green

MajorStrokeThickness

2

DataChart Configuring Major and Minor Intervals 1.png

In C#:

var yAxis = new NumericYAxis();
yAxis.MinorInterval = 2.5;
yAxis.MinorStrokeThickness = 1;
yAxis.MinorStroke = new SolidColorBrush(Color.Red);
yAxis.Interval = 10;
yAxis.MajorStrokeThickness = 2;
yAxis.MajorStroke = new SolidColorBrush(Color.Green);

In Visual Basic:

Dim yAxis = New NumericYAxis()
yAxis.MinorInterval = 2.5
yAxis.MinorStrokeThickness = 1
yAxis.MinorStroke = New SolidColorBrush(Color.Red)
yAxis.Interval = 10
yAxis.MajorStrokeThickness = 1
yAxis.MajorStroke = New SolidColorBrush(Color.Green)

Example using NumericXAxis

The screenshot below demonstrates how the NumericXAxis in a UltraDataChart control looks as a result of the following interval related settings:

Property Value

MinorInterval

0.5

MinorStroke

Red

MinorStrokeThickness

1

Interval

2

MajorStroke

Green

MajorStrokeThickness

2

DataChart Configuring Major and Minor Intervals 2.png

In C#:

var xAxis = new NumericXAxis();
xAxis.MinorInterval = 2.5;
xAxis.MinorStrokeThickness = 1;
xAxis.MinorStroke = new SolidColorBrush("Red");
xAxis.Interval = 10;
xAxis.MajorStrokeThickness = 2;
xAxis.MajorStroke = new SolidColorBrush("Green");

In Visual Basic:

Dim xAxis = New NumericXAxis()
xAxis.MinorInterval = 2.5
xAxis.MinorStrokeThickness = 1
xAxis.MinorStroke = New SolidColorBrush(Red)
xAxis.Interval = 10
xAxis.MajorStrokeThickness = 2
xAxis.MajorStroke = New SolidColorBrush(Green)

Example using CategoryXAxis

The screenshot below demonstrates how the CategoryXAxis in a UltraDataChart control looks as a result of the following minor interval related settings:

Property Value

MinorInterval

0.5

MinorStroke

Red

MinorStrokeThickness

1

Interval

2

MajorStroke

Green

MajorStrokeThickness

2

CategoryXAxis.Gap

0.5

DataChart Configuring Major and Minor Intervals 3.png

In C#:

var xAxis= new CategoryXAxis();
xAxis.MinorInterval = 2.5;
xAxis.MinorStrokeThickness = 1;
xAxis.MinorStroke = new SolidColorBrush("Red");
xAxis.Interval = 10;
xAxis.MajorStrokeThickness = 2;
xAxis.MajorStroke = new SolidColorBrush("Green");

In Visual Basic:

Dim xAxis = New CategoryXAxis()
xAxis.MinorInterval = 2.5
xAxisAxis.MinorStrokeThickness = 1
xAxis.MinorStroke = New SolidColorBrush(Red)
xAxis.Interval = 10
xAxis.MajorStrokeThickness = 2
xAxis.MajorStroke = New SolidColorBrush(Green)

Example using Category-DateTimeXAxis

The screenshot below demonstrates how the CategoryDateTimeXAxis in a UltraDataChart control looks as a result of the following interval related settings:

Property Value

MinorInterval

2.5

MinorStroke

Red

MinorStrokeThickness

1

Interval

10

MajorStroke

Green

MajorStrokeThickness

2

DataChart Configuring Major and Minor Intervals 4.png

In C#:

var xAxis = new CategoryDateTimeXAxis();
xAxis.MinorInterval = new TimeSpan(0, 12, 0, 0);
xAxis.MinorStrokeThickness = 1;
xAxis.MinorStroke = new SolidColorBrush("Red");
xAxis.Interval = new TimeSpan(2, 0, 0, 0);
xAxis.MajorStrokeThickness = 3;
xAxis.MajorStroke = new SolidColorBrush("Green");

In Visual Basic:

Dim xAxis = New CategoryDateTimeXAxis()
xAxis.MinorInterval = New TimeSpan(0, 12, 0, 0)
xAxis.MinorStrokeThickness = 1
xAxis.MinorStroke = New SolidColorBrush(Red)
xAxis.Interval = New TimeSpan(2, 0, 0, 0)
xAxis.MajorStrokeThickness = 3
xAxis.MajorStroke = New SolidColorBrush(Green)

Topics

The following topics provide additional information related to this topic.

Topic Purpose

The UltraDataChart control requires a Data set and data binding. This topic demonstrates how to provide a simple Data Object Model.

This topic introduces the types of axes supported by the UltraDataChart control.

This topic explains, with code examples, how to use the Column Series in the UltraDataChart control.

This topic explains, with code examples, how to use the various Scatter Series types in the UltraDataChart control.