Intersoft ClientUI Documentation
Working With Axis
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Data Visualization Controls Overview > UXChart > Working With Axis

UXChart typically have two axes that are used to measure and categorize data, a vertical value (y) axis, and a horizontal category (x) axis. UXChart categorize them all on three different groups, which is CategoryAxis, LinearAxis, and DateTimeAxis. By default, most of the chart series will have two axis which are Dependent Axis and Independent Axis. However, this does not apply to Pie and Radar series.

Dependent axis is an axis on a graph that is usually drawn from bottom to top and commonly shows the range of values of variable dependent on one other variable. This can differ according on series type. Dependent axis consists of LinearAxis and DateTimeAxis.

Independent axis is an axis on a graph that is usually drawn from left to right and commonly shows the range of values of variable independent on one other variable. This can differ according on series type. Independent axis consists of CategoryAxis, LinearAxis, and DateTimeAxis.

As mentioned above, there are three main type of axis labels supported in UXChart.

Category Axis

CategoryAxis displays text labels instead of numerical intervals, CategoryAxis lets charts represent data grouped by a set of discrete values along an axis. You typically use the CategoryAxis to define a set of labels that appear along an axis of a chart.

When using CategoryAxis you can sort its category whether descending or ascending. You can also set the Title of CategoryAxis.

The following example shows how to customize CategoryAxis in XAML

XAML
Copy Code 
<Intersoft:UXChart>
    <Intersoft:UXChart.Series>
        <Intersoft:ColumnSeries Title="Medals"
                                ItemsSource="{Binding DataSource}"
                                IndependentValueBinding="{Binding Country}"
                                DependentValueBinding="{Binding MedalCount}" >
            <Intersoft:ColumnSeries.IndependentAxis>
                <Intersoft:CategoryAxis Location="Bottom" Orientation="X" SortOrder="Ascending" />
            </Intersoft:ColumnSeries.IndependentAxis>
        </Intersoft:ColumnSeries>
    </Intersoft:UXChart.Series>
</Intersoft:UXChart>

Linear Axis

LinearAxis is a range axis type that puts numeric values evenly between a Minimum and Maximum value along a chart axis. By default, it determines Minimum, Maximum, and Interval values from the charting data to fit all of the chart elements on the screen.

You can also explicitly set specific values for these properties. because it is range type you can specify the Interval between value, and also how much interval count by using MaximumIntervalCount

The following example shows how to customize LinearAxis in XAML.

XAML
Copy Code 
<Intersoft:UXChart>
    <Intersoft:UXChart.Series>
        <Intersoft:ColumnSeries ItemsSource="{Binding DataSource}"
                IndependentValueBinding="{Binding Country}"
                DependentValueBinding="{Binding MedalCount}">
            <Intersoft:ColumnSeries.DependentRangeAxis>
                <Intersoft:LinearAxis ExtendRangeToOrigin="True" 
                        Maximum="100" Minimum="0" Interval="10" />
            </Intersoft:ColumnSeries.DependentRangeAxis>
        </Intersoft:ColumnSeries>
    </Intersoft:UXChart.Series>
</Intersoft:UXChart>

Date Time Axis

DateTimeAxis is a range axis type that puts time values evenly between a Minimum and Maximum value along a chart Axis. The DateTimeAxis chooses the most reasonable units to mark the Axis by examining the range between the Minimum and Maximum values of the axis. The DateTimeAxis chooses the largest unit that generates a reasonable number of labels for the given range.

You can specify the Minimum and Maximum values explicitly, or let the Axis automatically determine them by examining the values being renderered in the chart. By default, the DateTimeAxis chooses the smallest possible range to contain all the values represented in the chart.

The following example shows how to customize DateTimeAxis in XAML

XAML
Copy Code 
<Intersoft:UXChart>
    <Intersoft:UXChart.Series>
        <Intersoft:LineSeries ItemsSource="{Binding BingVisitors}
                IndependentValueBinding="{Binding Date}"
                DependentValueBinding="{Binding Visitor}" >
            <Intersoft:LineSeries.IndependentAxis>
                <Intersoft:DateTimeAxis Orientation="X" ShowGridLines="True"
                        Maximum="12/12/2012" Minimum="12/12/2010"
                        IntervalType="Weeks" Interval="4"/>
                </Intersoft:LineSeries.IndependentAxis>
        </Intersoft:LineSeries>
    </Intersoft:UXChart.Series>
</Intersoft:UXChart>

Default Customization

In UXChart, when you have multiple series in one chart and you want to customize their axis together, you can set one style to be your default style that can be use along with all series.

The following example shows you how to customize DependentLinearAxisStyle in XAML

XAML
Copy Code 
<Intersoft:UXChart>
        <Intersoft:UXChart.DependentLinearAxisStyle>
                <Style TargetType="Intersoft:LinearAxis">
                        <Setter Property="Minimum" Value="0" />
                        <Setter Property="Maximum" Value="1000" />
                        <Setter Property="Interval" Value="100" />
                        <Setter Property="Orientation" Value="Y" />
                        <Setter Property="ShowGridLines"Value="True" />
                        <Setter Property="IsAlternatingGridLine"Value="True" />
                </Style>
        </Intersoft:UXChart.DependentLinearAxisStyle>
        <Intersoft:UXChart.Series>
                <Intersoft:LineSeries ItemsSource="{Binding BingVisitors}"
                        IndependentValueBinding="{Binding Date}"
                        DependentValueBinding="{Binding Visitor}" />
        </Intersoft:UXChart.Series>
</Intersoft:UXChart>

The following example shows you how to customize DependentDateAxisStyle in XAML

XAML
Copy Code 
<Intersoft:UXChart>
        <Intersoft:UXChart.DependentDateAxisStyle>
                <Style TargetType="Intersoft:DateTimeAxis">
                        <Setter Property="Minimum" Value="11/11/2011" />
                        <Setter Property="Maximum" Value="21/12/2012" />
                        <Setter Property="Interval" Value="10" />
                        <Setter Property="Orientation" Value="Y" />
                        <Setter Property="ShowGridLines" Value="True" />
                        <Setter Property="IsAlternatingGridLine" Value="True" />
                        <Setter Property="IntervalType" Value="Days"/>
                </Style>
        </Intersoft:UXChart.DependentDateAxisStyle>
        <Intersoft:UXChart.Series>
                <Intersoft:LineSeries ItemsSource="{Binding BingVisitors}"
                                IndependentValueBinding="{Binding Date}"
                                DependentValueBinding="{Binding Visitor}" />
        </Intersoft:UXChart.Series>
</Intersoft:UXChart>

The following example shows you how to customize IndependentCategoryAxisStyle in XAML

XAML
Copy Code 
<Intersoft:UXChart>
    <Intersoft:UXChart.IndependentCategoryAxisStyle>
        <Style TargetType="Intersoft:CategoryAxis">
            <Setter Property="Orientation" Value="X" />
            <Setter Property="AxisLabelStyle">
                <Setter.Value>
                    <Style TargetType="Intersoft:AxisLabel">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Intersoft:AxisLabel">
                                    <Grid x:Name="Root">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="RevealStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition GeneratedDuration="0:0:0.1" />
                                                </VisualStateGroup.Transitions>
                                                <VisualState x:Name="Shown">
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="Root"
                                                                Storyboard.TargetProperty="Opacity"
                                                                        To="1" Duration="0" />
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Hidden">
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="Root"
                                                                Storyboard.TargetProperty="Opacity"
                                                                To="0" Duration="0" />
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Intersoft:ContentTransformer>
                                            <Intersoft:ContentTransformer.Transform>
                                                <RotateTransform Angle="-90" />
                                            </Intersoft:ContentTransformer.Transform>
                                            <TextBlock Text="{TemplateBinding FormattedContent}" />
                                                </Intersoft:ContentTransformer>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Setter.Value>
                    </Setter>
                </Style>
                </Intersoft:UXChart.IndependentCategoryAxisStyle>
        <Intersoft:UXChart.Series>
        <Intersoft:ColumnSeries ItemsSource="{Binding DataSource}"
                IndependentValueBinding="{Binding Country}"
                DependentValueBinding="{Binding MedalCount}" />
        </Intersoft:UXChart.Series>
</Intersoft:UXChart>

The following example shows you how to customize IndependentDateAxisStyle in XAML

XAML
Copy Code 
<Intersoft:UXChart>
        <Intersoft:UXChart.IndependentDateAxisStyle>
                <Style TargetType="Intersoft:DateTimeAxis">
                        <Setter Property="Minimum" Value="11/11/2011" />
                        <Setter Property="Maximum" Value="21/12/2012" />
                        <Setter Property="Interval" Value="10" />
                        <Setter Property="Orientation" Value="Y" />
                        <Setter Property="IntervalType" Value="Days"/>
                </Style>
        </Intersoft:UXChart.IndependentDateAxisStyle>
        <Intersoft:UXChart.Series>
                <Intersoft:LineSeries ItemsSource="{Binding BingVisitors}"
                        IndependentValueBinding="{Binding Date}"
                        DependentValueBinding="{Binding Visitor}" />
        </Intersoft:UXChart.Series>
</Intersoft:UXChart>

The following example shows you how to customize IndependentLinearAxisStyle in XAML

XAML
Copy Code 
<Intersoft:UXChart>
    <Intersoft:UXChart.IndependentLinearAxisStyle>
        <Style TargetType="Intersoft:LinearAxis">
                <Setter Property="Minimum" Value="0" />
                <Setter Property="Maximum" Value="100" />
                <Setter Property="Interval" Value="10" />
        </Style>
    </Intersoft:UXChart.IndependentLinearAxisStyle>
    <Intersoft:UXChart.Series>
        <Intersoft:LineSeries ItemsSource="{Binding BingVisitors}"
                IndependentValueBinding="{Binding Date}"
                DependentValueBinding="{Binding Visitor}" />
        </Intersoft:UXChart.Series>
</Intersoft:UXChart>

Multiple Axes

In case you want to host multiple series in your chart, and each of series contain different range of data, and you don't want to mix your axis together, you can use specify different axis in your series. you can also specify the position and the orientation of your other axes using Orientation property and Location property.

To learn more about the multiple axes, see How to: Add Additional Axis in UXChart.

Title Style

If you have many axis, you maybe confused to distinguish which axis belong to which series. UXChart allows you to set the title of the associated axis, and you can also customize it with your own style through the TitleStyle property.

Axis Label

An AxisLabel is a text string aligned with the x-, or y-axis in a graph. AxisLabel can help explain the meaning of the units that each axis represents, You can define the values of AxisLabel on the horizontal axis or vertical axis. You can customize these values by using the available data in the series or using style. It can be in different format, such as text, date, number, or even formatted text.

You can specify the interval of your axis label to appear on chart. For more information,  see How to: Customize Axis Interval in UXChart. 

Grid Lines

Grid lines is a pattern of horizontal and vertical lines spaced out at regular intervals, grid lines may appear to aid in the visual alignment of data. All charts, except the Pie and Doughnut, have grid lines by default. If you want to disable grid lines, set the ShowGridLine property to False. And if you ever need your grid line to alternate, you can set the IsAlternatingGridLine property and set to True.

Additional Grid Lines

If you want to distinguish a specific area in UXChart, you can add the AdditionalGridLine object to the AdditionalGridLines collection. The additional gridlines allow you to determine which data point that exceeds a specific maximum boundary and which one below the minimum boundary.

To learn more about additional grid lines, see How to: Add Additional Grid Lines in UXChart.

Gridline Style Selector

If you ever wanted to have scenarios where you want to have different gridline style inside one chart, you can achieve it elegantly in UXChart by using GridLineStyleSelector property, It works similarly to any other style selectors.

The following example shows you how to use style selector.

C#
Copy Code 
using System.Windows;
using Intersoft.Client.Framework;

namespace Intersoft.ClientUI.Samples.DataVisualization.StyleSelectors
{
    public class AlternateStyleSelector : StyleSelector
    {
        public Style ItemStyle { get; set; }
        public Style AlternateItemStyle { get; set; }
        private int Index { get; set; }

        public override Style SelectStyle(object item, DependencyObject container)
        {
            if (this.Index++ % 2 == 0)
                return this.ItemStyle;
            else
                return this.AlternateItemStyle;
        }
    }
}
XAML
Copy Code 
<Grid.Resources>
        <Selectors:AlternateStyleSelector x:Key="GridLineStyleSelector">
                <Selectors:AlternateStyleSelector.ItemStyle >
                        <Style TargetType="Intersoft:GridLine">
                                <Setter Property="Background" Value="#FFFFC068" />
                        </Style>
                </Selectors:AlternateStyleSelector.ItemStyle >
                <Selectors:AlternateStyleSelector.AlternateItemStyle>
                        <Style TargetType="Intersoft:GridLine">
                                <Setter Property="Background" Value="#FF2f88d4" />
                        </Style>
                </Selectors:AlternateStyleSelector.AlternateItemStyle>
        </Selectors:AlternateStyleSelector>

        <Style TargetType="Intersoft:CategoryAxis">
                <Setter Property="GridLineStyleSelector" Value="{StaticResource GridLineStyleSelector}" />
        </Style>
</Grid.Resources>

Learn More

To learn more about the concepts and more advanced features of the charting control, please refer to the following topics.

See Also
UXChart Class

Tasks

How-to: Add Additional Axis In UXChart
How-to: Add Additional Grid Lines In UXChart
How-to: Enable Data Drill Down In UXChart
How-to: Add Data Annotations In UXChart
How-to: Add Custom Palettes In UXChart
How-to: Customize ToolTip Template In UXChart
How-to: Customize Axis Interval In UXChart