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.
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.
The following example shows how to customize CategoryAxis in XAML
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.
The following example shows how to customize LinearAxis in XAML.
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
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
The following example shows you how to customize DependentDateAxisStyle in XAML
The following example shows you how to customize IndependentCategoryAxisStyle in XAML
The following example shows you how to customize IndependentDateAxisStyle in XAML
The following example shows you how to customize IndependentLinearAxisStyle in XAML
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.
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.
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 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.
To learn more about the concepts and more advanced features of the charting control, please refer to the following topics.