Axis in UWP Charts (SfChart)

4 Dec 202224 minutes to read

ChartAxis is used to locate a data point inside the chart area. Generally, to locate a data point, you require two axes, along each direction, that is, horizontal and vertical, in a chart. The vertical axis, or y-axis, usually represents numerical values .The horizontal axis, or x-axis, represents categorical or numerical or date and time values. ChartAxis supports the following types.

  • Double

  • DateTime(Linear)

  • DateTime(Category)

  • String

  • TimeSpan

  • Logarithmic

You can choose any ChartAxis derived types, like DateTimeAxis, NumericalAxis, CategoryAxis, LogarithmicAxis or TimeSpanAxis depending on the value type. DateTimeCategoryAxis is a special type, used to plot date and time values for the given datapoints.

NumericAxis

NumericalAxis is used to plot numerical value to the chart. You can set NumericalAxis for both PrimaryAxis and SecondaryAxis.

The following APIs are used to customize NumericalAxis.

Properties

Property Definition

Interval

Gets or sets the double that represents the interval between the labels.

Minimum

Gets or sets the double that represents the Minimum value for the Axis.

Maximum

Gets or sets the double that represents the Maximum value for the Axis.

RangePadding

Gets or sets the NumericalPadding that specifies how to render the segments in chart area.

StartRangeFromZero

Gets or sets the bool that represents a value to enable start the range from zero.
<syncfusion:SfChart x:Name="Chart"   Margin="5,0,10,0">

            <syncfusion:SfChart.DataContext>

                <local:ViewModel/>

            </syncfusion:SfChart.DataContext>

            <syncfusion:SfChart.PrimaryAxis>

                <syncfusion:CategoryAxis   Header="Company Name"/>

            </syncfusion:SfChart.PrimaryAxis>

            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:NumericalAxis Interval="100" Minimum="0" Maximum="1000" RangePadding="Round"   Header="Gross Revenue "/>

            </syncfusion:SfChart.SecondaryAxis>



            <syncfusion:ColumnSeries x:Name="series1" Label="Company Details"   XBindingPath="CompanyName" YBindingPath="CompanyTurnOver"   ItemsSource="{Binding CompanyDetails}">

            </syncfusion:ColumnSeries>

        </syncfusion:SfChart>
SfChart chart = new SfChart();

chart.Margin = new Thickness(5, 0, 10, 0);

chart.DataContext = new ViewModel();

chart.PrimaryAxis = new CategoryAxis() { Header = "Company Name" };

chart.SecondaryAxis = new NumericalAxis()
{

    Header = "Gross Revenue",

    Minimum = 0,

    Maximum = 1000,

    Interval = 100,

    RangePadding = NumericalPadding.Round

};

ColumnSeries series = new ColumnSeries()
{

    ItemsSource = new ViewModel().CompanyDetails,

    XBindingPath = "CompanyName",

    YBindingPath = "CompanyTurnOver"

};

chart.Series.Add(series);

NumericalAxis support in UWP Chart

CategoryAxis

CategoryAxis is an index based axis that plots values based on the index of the data point collection. The points are equally spaced here.

The following APIs are used in CategoryAxis.

CategoryAxis

Property Definition

Interval

Gets or sets the double value that represents the interval between the labels.

LabelPlacement

Gets or sets the LabelPlacement that represents the position of the label in the axis.
<syncfusion:SfChart x:Name="Chart"   Margin="5,0,10,0">

                <syncfusion:SfChart.DataContext>

                    <local:ViewModel/>

                </syncfusion:SfChart.DataContext>



                <syncfusion:SfChart.PrimaryAxis>

                    <syncfusion:CategoryAxis   Header="Company Name"/>

                </syncfusion:SfChart.PrimaryAxis>



                <syncfusion:SfChart.SecondaryAxis>

                    <syncfusion:NumericalAxis Interval="10" Minimum="200" Maximum="400" RangePadding="Round"   Header="Gross Revenue "/>

                </syncfusion:SfChart.SecondaryAxis>



                <syncfusion:ColumnSeries x:Name="series1" Label="Company Details"   XBindingPath="CompanyName" YBindingPath="CompanyTurnOver"   ItemsSource="{Binding CompanyDetails}">

                </syncfusion:ColumnSeries>



            </syncfusion:SfChart>
SfChart chart = new SfChart();

chart.Margin = new Thickness(5, 0, 10, 0);

chart.DataContext = new ViewModel();

chart.PrimaryAxis = new CategoryAxis() { Header = "Company Name" };

chart.SecondaryAxis = new NumericalAxis()
{

    Header = "Gross Revenue",

    Minimum = 200,

    Maximum = 400,

    Interval = 10,

    RangePadding = NumericalPadding.Round

};

ColumnSeries series = new ColumnSeries()
{

    ItemsSource = new ViewModel().CompanyDetails,

    XBindingPath = "CompanyName",

    YBindingPath = "CompanyTurnOver"

};

chart.Series.Add(series);

CategoryAxis support in UWP Chart

IsIndexed

By default, CategoryAxis plots values based on the index of the data points. However, the CategoryAxis can be made to plot the data points based on its data by disabling the IsIndexed property of CategoryAxis, and it is shown in the following code example.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis IsIndexed="False"/>
                
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
                
    IsIndexed = false,
            
};

The following screenshot illustrates the series with IsIndexed value as False.

Plotting datapoints based on axis data in UWP Chart

By default, the value of IsIndexed property is true, and it is shown in following screenshot.

Plotting datapoints based on index in UWP Chart

NOTE

This feature is not applicable for Accumulation series, ErrorBarSeries, RadarSeries, and PolarSeries.

AggregateFunctions

When the IsIndexed property of CategoryAxis is disabled, the same index values(XValue) are grouped using the AggregateFunctions property of the axis. The AggregateFunctions property has the following types:

  • Average
  • Count
  • Max
  • Min
  • None
  • Sum

The default value of AggregateFunctions is None.

Average

The following code example demonstrates the axis with AggregateFunctions as Average.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Average"/>
                
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
                
    IsIndexed = false,
    
    AggregateFunctions = AggregateFunctions.Average
            
};

Grouping of same datapoint index value in UWP Chart

Count

The following code example demonstrates the axis with AggregateFunctions as Count.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Count"/>
                
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
                
    IsIndexed = false,
    
    AggregateFunctions = AggregateFunctions.Count
            
};

Grouping of same datapoint index value in UWP Chart

Max

The following code example demonstrates the axis with AggregateFunctions as Max.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Max"/>
                
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
                
    IsIndexed = false,
    
    AggregateFunctions = AggregateFunctions.Max
            
};

Grouping of same datapoint index value in UWP Chart

Min

The following code example demonstrates the axis with AggregateFunctions as Min.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Min"/>
                
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
                
    IsIndexed = false,
    
    AggregateFunctions = AggregateFunctions.Min
            
};

Grouping of same datapoint index value in UWP Chart

Sum

The following code example demonstrates the axis with AggregateFunctions as Sum.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Sum"/>
                
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
                
    IsIndexed = false,
    
    AggregateFunctions = AggregateFunctions.Sum
            
};

Grouping of same datapoint index value in UWP Chart

DateTimeAxis

DateTimeAxis is used to plot DateTime values. The DateTimeAxis is widely used to make financial charts in places like the Stock Market, where index plotting is done everyday.

The following APIs are used for customizing DateTimeAxis.

DateTimeAxis

Property Definition

Minimum

Gets or sets the DateTime value that represents a minimum value of the Axis.

Maximum

Gets or sets the DateTime value that represents a maximum value of the Axis.

RangePadding

Gets or sets the DateTimeRangePadding value that specifies segment arrangement in the chart area.

Interval

Gets or sets the double value as the interval between labels.

IntervalType

Gets or sets the DateTimeIntervalType. It represents the type of the interval. This property is used to define the type of interval to be displayed and considered for plotting the series.

EnableBusinessHours

Gets or sets the bool value that represents a value to enable business hours.

OpenTime

Gets or sets the double value that represents the open working time of a day.

CloseTime

Gets or sets the double value that represents the close working time of a day.

WorkingDays

Gets or sets the double value that represents the working days of a week.

DateTimeIntervalType

The DateTime interval corresponds to the type specified in the IntervalType property.

For instance, if the Interval is set as 2 and IntervalType is set as Days, the labels are plotted for every two days. The following are the values for IntervalType property:

  • Auto
  • Days
  • Hours
  • Milliseconds
  • Minutes
  • Months
  • Seconds
  • Years

The default IntervalType of a DateTimeAxis is Auto. It calculates the type automatically and the interval, accordingly.

<syncfusion:SfChart.PrimaryAxis>

                <syncfusion:DateTimeAxis Name="Primary" 

                                    IntervalType="Years" Interval="1" />

            </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new DateTimeAxis()
{

    IntervalType = DateTimeIntervalType.Years,

    Interval = 1

};

The following code example and screenshot are for DateTimeAxis.

  <syncfusion:SfChart x:Name="Chart"   Margin="5,0,10,0">

            <syncfusion:SfChart.DataContext>

                <local:ViewModel/>

            </syncfusion:SfChart.DataContext>



            <syncfusion:SfChart.PrimaryAxis>

                <syncfusion:DateTimeAxis Interval="1" LabelFormat="yyyy" IntervalType="Years”/>

            </syncfusion:SfChart.PrimaryAxis>



            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:NumericalAxis />

            </syncfusion:SfChart.SecondaryAxis>



            <syncfusion:LineSeries x:Name="series1" Label="Company Details"   XBindingPath="Year" YBindingPath="CompanyTurnOver"  ItemsSource="{Binding CompanyDetails}">

            </syncfusion:LineSeries>

        </syncfusion:SfChart>
chart.Margin = new Thickness(5, 0, 10, 0);

chart.DataContext = new ViewModel();

chart.PrimaryAxis = new DateTimeAxis()
{

    IntervalType = DateTimeIntervalType.Years,

    Interval = 1,

    LabelFormat = "yyyy"

};

chart.SecondaryAxis = new NumericalAxis();

ColumnSeries series = new ColumnSeries()
{

    ItemsSource = new ViewModel().CompanyDetails,

    XBindingPath = "Year",

    YBindingPath = "CompanyTurnOver"

};

chart.Series.Add(series);

DateTimeAxis support in UWP Chart

DateTimeCategoryAxis

DateTimeCategoryAxis is a special type of axis used mainly with financial series. All the data points are plotted with equal spaces, similar to CategoryAxis, thereby removing space for missing dates. Intervals and range for the axis are calculated similar to DateTimeAxis. There are no visual gaps between points, even when the difference between two points is more than a year.

DateTimeCategoryAxis

Property Definition

Interval

Gets or sets the double value that represents the interval between the labels.

IntervalType

Gets or sets the DateTimeIntervalType that represents the type of the interval.
<syncfusion:SfChart x:Name="Chart"   Margin="5,0,10,0">

            <syncfusion:SfChart.DataContext>

                <local:ViewModel/>

            </syncfusion:SfChart.DataContext>



            <syncfusion:SfChart.PrimaryAxis>

                <syncfusion:DateTimeCategoryAxis Interval="1" LabelFormat="yyyy" IntervalType="Years"  Header="Company Name"/>

            </syncfusion:SfChart.PrimaryAxis>



            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:NumericalAxis   Header="Gross Revenue (cr.)"/>

            </syncfusion:SfChart.SecondaryAxis>



            <syncfusion:LineSeries x:Name="series1" Label="Company Details"   XBindingPath="Year" YBindingPath="CompanyTurnOver"   ItemsSource="{Binding CompanyDetails}">

            </syncfusion:LineSeries>



        </syncfusion:SfChart>
chart.Margin = new Thickness(5, 0, 10, 0);

chart.DataContext = new ViewModel();

chart.PrimaryAxis = new DateTimeCategoryAxis()
{

    IntervalType = DateTimeIntervalType.Years,

    Interval = 1,

    LabelFormat = "yyyy",

    Header = "Company Name"

};

chart.SecondaryAxis = new NumericalAxis()
{
    Header="Gross Revenue (cr.)"
};

ColumnSeries series = new ColumnSeries()
{

    ItemsSource = new ViewModel().CompanyDetails,

    XBindingPath = "Year",

    YBindingPath = "CompanyTurnOver"

};

chart.Series.Add(series);

DateTimeCategoryAxis support in UWP Chart

TimeSpanAxis

TimeSpanAxis is used to plot the time span values in the PrimaryAxis. TimeSpanAxis has the advantage of plotting data with milliseconds difference. The limitation of TimeSpanAxis is that it can only accept timespan values (hh:mm:ss) and datetime values are not accepted.

The following APIs are used in TimeSpanAxis.

TimeSpanAxis

Property Definition

Interval

Gets or sets the double value that represents the interval between the labels.

Minimum

Gets or sets the timespan value that represents the minimum value for the Axis.

Maximum

Gets or sets the timespan value that represents the maximum value for the Axis.
 <syncfusion:SfChart x:Name="Chart"   Margin="5,0,10,0">

            <syncfusion:SfChart.DataContext>

                <local:ViewModel/>

            </syncfusion:SfChart.DataContext>



            <syncfusion:SfChart.PrimaryAxis>

                <syncfusion:TimeSpanAxis Interval="00:00:01" Header="Company Name"/>

            </syncfusion:SfChart.PrimaryAxis>



            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:NumericalAxis   Header="Gross Revenue (cr.)"/>

            </syncfusion:SfChart.SecondaryAxis>

            <syncfusion:LineSeries x:Name="series1" Label="Company Details"   XBindingPath="Year" YBindingPath="CompanyTurnOver"  ItemsSource="{Binding CompanyDetails}">

            </syncfusion:LineSeries>

        </syncfusion:SfChart>
chart.Margin = new Thickness(5, 0, 10, 0);

chart.DataContext = new ViewModel();

chart.PrimaryAxis = new TimeSpanAxis()
{

    Interval = new TimeSpan(00, 00, 01),

    Header = "Company Name"

};


chart.SecondaryAxis = new NumericalAxis()
{
    Header="Gross Revenue (cr.)"
};

ColumnSeries series = new ColumnSeries()
{

    ItemsSource = new ViewModel().CompanyDetails,

    XBindingPath = "Year",

    YBindingPath = "CompanyTurnOver"

};

chart.Series.Add(series);

TimeSpanAxis support in UWP Chart

LogarithmicAxis

LogarithmicAxis is used to plot the logarithmic scale for the chart. In order to plot the logarithmic scale, you must specify the base value using LogarithmicBase Property.

The following APIs are used to customize the LogarithmicAxis.

LogarithmicAxis

Property Definition

Interval

Gets or sets the double value that represents the interval between the labels

Minimum

Gets or sets the double value that represents the minimum value for the Axis.

Maximum

Gets or sets the double value that represents the maximum value of the Axis.

LogarithmicBase

Gets or sets the double value that represents the logarithmic base value of the Axis.
<syncfusion:SfChart x:Name="Chart"   Margin="5,0,10,0">

            <syncfusion:SfChart.DataContext>

                <local:ViewModel/>

            </syncfusion:SfChart.DataContext>



            <syncfusion:SfChart.PrimaryAxis>

                <syncfusion:CategoryAxis   Header="Company Name"/>

            </syncfusion:SfChart.PrimaryAxis>



            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:LogarithmicAxis LogarithmicBase="10"   Header="Gross Revenue (cr.)"/>

            </syncfusion:SfChart.SecondaryAxis>

            <syncfusion:LineSeries x:Name="series1" Label="Company Details"   XBindingPath="CompanyName" YBindingPath="CompanyTurnOver"   ItemsSource="{Binding CompanyDetails}">

            </syncfusion:LineSeries>



        </syncfusion:SfChart>
chart.Margin = new Thickness(5, 0, 10, 0);

chart.DataContext = new ViewModel();

chart.PrimaryAxis = new CategoryAxis()
{

    Header = "Company Name"

};

chart.SecondaryAxis = new LogarithmicAxis()
{

    Header = "Gross Revenue",

    LogarithmicBase = 10

};

ColumnSeries series = new ColumnSeries()
{

    ItemsSource = new ViewModel().CompanyDetails,

    XBindingPath = "Year",

    YBindingPath = "CompanyTurnOver"

};

chart.Series.Add(series);

Logarithmic Axis does not support zero or negative values.

The following screenshot illustrates the SfChart with LogarithmicAxis.

LogarithmicAxis support in UWP Chart

Multiple Axes

SfChart provides a way to arrange multiple series inside the same chart area, giving the chart more space than x-axis and y-axis.These axes can be arranged in a stack or in a side by side pattern.

By default, all the series are plotted based on Primary and Secondary Axis. You can add more axes by adding additional axis to the series. There are two properties XAxis and YAxis in all the series, except Accumulation Series.

<syncfusion:ColumnSeries Label="2010" 

     ItemsSource="{Binding Demands}"

     XBindingPath="Demand"

     YBindingPath="Year2010"

     Interior="Green"

     

            <syncfusion:ColumnSeries.XAxis>

                <syncfusion:NumericalAxis Header="Additional X Axis"/>

            </syncfusion:ColumnSeries.XAxis>



            <syncfusion:ColumnSeries.YAxis>

                <syncfusion:NumericalAxis Header="Additional Y Axis"/>

            </syncfusion:ColumnSeries.YAxis>



        </syncfusion:ColumnSeries>



        <syncfusion:LineSeries Label="2011" 

    ItemsSource="{Binding Demands}"

    XBindingPath="Demand"

    YBindingPath="Year2011"

    Interior="Black"

    StrokeThickness="2"/>
ColumnSeries series1 = new ColumnSeries()
{

    ItemsSource = new ViewModel().Demands,

    XBindingPath = "Demand",

    YBindingPath = "Year2010",

    Label ="2010",

    Interior = new SolidColorBrush(Colors.Green)

};

series1.XAxis = new NumericalAxis()
{

    Header = "Additional X Axis"

};

series1.YAxis = new NumericalAxis()
{

    Header = "Additional Y Axis"

};

LineSeries series2 = new LineSeries()
{

    ItemsSource = new ViewModel().Demands,

    XBindingPath = "Demand",

    YBindingPath = "Year2011",

    Label = "2011",

    Interior = new SolidColorBrush(Colors.Black),

    StrokeThickness = 2

};

chart.Series.Add(series1);

chart.Series.Add(series2);

The following screenshot illustrates SfChart with multiple axes.

Multiple axes support in UWP Chart

The first series is plotting based on additional X & Y axis and second series (or remaining series) is plotting against the Primary and Secondary axis.

Axis Positioning

By default, the x-axis is arranged horizontally at the bottom of the chart and the y-axis is arranged vertically on the left-side of the chart. You can change the alignment of the axes by setting OpposedPosition to True. It arranges the x-axis at the top and the y-axis on the right-side of the chart.

The following is the code example for setting the OpposedPosition property.

<syncfusion:ColumnSeries.XAxis>

            <syncfusion:NumericalAxis Header="Additional X Axis" OpposedPosition="True"/>

        </syncfusion:ColumnSeries.XAxis>



        <syncfusion:ColumnSeries.YAxis>

            <syncfusion:NumericalAxis Header="Additional Y Axis" OpposedPosition="True"/>

        </syncfusion:ColumnSeries.YAxis>
columnSeries.XAxis = new NumericalAxis()
{

    Header = "Additional X Axis",

    OpposedPosition = true

};

columnSeries.YAxis = new NumericalAxis()
{

    Header = "Additional Y Axis",

    OpposedPosition = true

};

The following is a screenshot demonstrating y-axis of a chart arranged in OpposedPosition.

Axis Positioning support in UWP Chart

Inversed Axis

IsInversed property is used to reverse chart plotting inverse the axis scaling.

<syncfusion:SfChart.PrimaryAxis>

                <syncfusion:CategoryAxis   FontSize="16" IsInversed="True" OpposedPosition="True" />

            </ syncfusion:SfChart.PrimaryAxis>



            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:NumericalAxis FontSize="16" Minimum="0" Maximum="2000" Interval=”200” IsInversed="True" OpposedPosition="True" />

            </syncfusion:SfChart.SecondaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    OpposedPosition = true,

    IsInversed = true

};

chart.SecondaryAxis = new NumericalAxis()
{

    FontSize = 16,

    Minimum = 0,

    Maximum = 2000,

    Interval = 200,

    IsInversed = true,

    OpposedPosition = true

};

Inversed axis support in UWP Chart

Axis range and Interval

ChartAxis calculates the range and intervals automatically based on the values of series data points. You can also explicitly specify the range and interval using the Minimum, Maximum and Interval properties.

TIPS

You cannot specify range for CategoryAxis instead you can use ZoomFactor and ZoomPosition.

You can force the NumericalAxis to start range from zero by enabling StartRangeFromZero. The following is the code example for setting the ChartAxis properties.

The following is the code sample for setting the ChartAxis properties:

<syncfusion:SfChart.PrimaryAxis>

                <syncfusion:CategoryAxis FontSize="14"/>

            </syncfusion:SfChart.PrimaryAxis>



            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:NumericalAxis FontSize="14"/>

            </syncfusion:SfChart.SecondaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 14

};

chart.SecondaryAxis = new NumericalAxis()
{

    FontSize = 14
};

Range Padding

The NumericalAxis and DateTimeAxis have a RangePadding property that can be used to add padding to the range of a chart’s axes.

NumericalAxis RangePadding

The following types are available for NumericalAxis:

  • Additional
  • None
  • Normal
  • Round
  • RoundStart
  • RoundEnd
  • PrependInterval
  • AppendInterval

By default, the default RangePadding value for PrimaryAxis is Auto and for SecondaryAxis, the default value is Round.

NumericalAxis range padding support in UWP Chart

The following screenshot demonstrates RangePadding as None, where no padding is applied for the axis.

NumericalAxis range padding support in UWP Chart

Normal RangePadding for a NumericalAxis is used mostly for the y-axis to have padding based on the Range calculation.

The following screenshot illustrates a chart’s y-axis with RangePadding set to Normal.

NumericalAxis range padding support in UWP Chart

Round RangePadding for a NumericalAxis rounds the range of the chart axis to the nearest possible value.

The following screenshot demonstrates a chart’s x-axis with RangePadding set to Round.

NumericalAxis range padding support in UWP Chart

If RangePadding for NumericalAxis is set to Additional, the interval of the axis is added as padding.

The following screenshot demonstrates a chart’s x-axis with RangePadding set to Additional.

NumericalAxis range padding support in UWP Chart

If RangePadding for NumericalAxis is set to RoundStart , rounds the range of the chart axis in the start to the nearest possible value.

The following screenshot demonstrates a chart’s x-axis with RangePadding set to RoundStart .

NumericalAxis range padding support in UWP Chart

If RangePadding for NumericalAxis is set to RoundEnd , rounds the range of the chart axis in the end to the nearest possible value.

The following screenshot demonstrates a chart’s x-axis with RangePadding set to RoundEnd .

NumericalAxis range padding support in UWP Chart

If RangePadding for NumericalAxis is set to PrependInterval , the interval of the axis is added in the start as padding.

The following screenshot demonstrates a chart’s x-axis with RangePadding set to PrependInterval .

NumericalAxis range padding support in UWP Chart

If RangePadding for NumericalAxis is set to AppendInterval , the interval of the axis is added in the end as padding.

The following screenshot demonstrates a chart’s x-axis with RangePadding set to AppendInterval .

NumericalAxis range padding support in UWP Chart

DateTimeAxis RangePadding

The RangePadding types available in the DateTimeAxis are:

  • Additional
  • None
  • Round
  • RoundStart
  • RoundEnd
  • PrependInterval
  • AppendInterval

By default, the RangePadding for a DateTimeAxis is None.

The following screenshot demonstrates a chart’s x-axis with RangePadding set to None.

DateTimeAxis range padding support in UWP Chart

When RangePadding for DateTimeAxis is set to Additional, the DateTime interval of the axis is added as padding, as shown in the following screenshot.

DateTimeAxis range padding support in UWP Chart

When RangePadding for DateTimeAxis is set to Round, the range of the chart axis is rounded off to the nearest possible DateTime value, as shown in the following screenshot.

DateTimeAxis range padding support in UWP Chart

When RangePadding for DateTimeAxis is set to RoundStart, the range of the chart axis is rounded in the start off to the nearest possible DateTime value, as shown in the following screenshot.

DateTimeAxis range padding support in UWP Chart

When RangePadding for DateTimeAxis is set to RoundEnd, the range of the chart axis is rounded in the end off to the nearest possible DateTime value, as shown in the following screenshot.

DateTimeAxis range padding support in UWP Chart

When RangePadding for DateTimeAxis is set to PrependInterval, the DateTime interval of the axis is added in the start as padding, as shown in the following screenshot.

DateTimeAxis range padding support in UWP Chart

When RangePadding for DateTimeAxis is set to AppendInterval, the DateTime interval of the axis is added in the end as padding, as shown in the following screenshot.

DateTimeAxis range padding support in UWP Chart

Applying padding to the axis

The PlotOffset property is used to provide padding to the axis. The following code sample demonstrates the padding applied to both x and y-axes.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis  PlotOffset="30">

</syncfusion:CategoryAxis>

</syncfusion:SfChart.PrimaryAxis>

<syncfusion:SfChart.SecondaryAxis>

<syncfusion:NumericalAxis PlotOffset="30">

</syncfusion:NumericalAxis>

</syncfusion:SfChart.SecondaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    PlotOffset = 30

};

chart.SecondaryAxis = new NumericalAxis()
{

    PlotOffset = 30

};

 PlotOffset support in UWP Chart

PlotOffsetStart

The PlotOffsetStart property is used to provide padding to the axis at start position. The following code sample demonstrates the padding applied to Start position for both x and y-axes.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis  PlotOffsetStart="30">

</syncfusion:CategoryAxis>

</syncfusion:SfChart.PrimaryAxis>

<syncfusion:SfChart.SecondaryAxis>

<syncfusion:NumericalAxis PlotOffsetStart="30">

</syncfusion:NumericalAxis>

</syncfusion:SfChart.SecondaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    PlotOffsetStart = 30

};

chart.SecondaryAxis = new NumericalAxis()
{

    PlotOffsetStart = 30

};

 PlotOffsetStart support in UWP Chart

PlotOffsetEnd

The PlotOffsetEnd property is used to provide padding to the axis at end position. The following code sample demonstrates the padding applied to end position for both x and y-axes.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis  PlotOffsetEnd="30">

</syncfusion:CategoryAxis>

</syncfusion:SfChart.PrimaryAxis>

<syncfusion:SfChart.SecondaryAxis>

<syncfusion:NumericalAxis PlotOffsetEnd="30">

</syncfusion:NumericalAxis>

</syncfusion:SfChart.SecondaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    PlotOffsetEnd = 30

};

chart.SecondaryAxis = new NumericalAxis()
{

    PlotOffsetEnd = 30

};

 PlotOffsetEnd support in UWP Chart

AutoScrollingDelta

AutoScrollingDelta is used to ensure whether the specified range of data is always visible in the chart. It always shows the recently added data points at the end, and scrolling will be reset to the end of the range whenever a new point is added.

By activating the EnableScrollBar property of the axis or by adding ChartZoomPanBehavior to the chart, you can scroll to the previous data points.

AutoScrollingDeltaType

In DateTimeAxis, you can apply auto scrolling delta value in Years, Months, Days, Hours, Minutes, Seconds and Milliseconds by setting the AutoScrollingDeltaType property. The default value of this property is Auto, and the delta will be calculated automatically based on range.

<chart:SfChart.PrimaryAxis>

    <chart:DateTimeAxis AutoScrollingDelta = "3" AutoScrollingDeltaType = "Days">

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis = new DateTimeAxis()
{
      AutoScrollingDelta = 3,
	  
      AutoScrollingDeltaType = DateTimeIntervalType.Days
};

AutoScrollingMode

The AutoScrollingMode property is used to determine whether the axis should be scrolled from the start position or end position. The default value of this property is End.

<chart:SfChart.PrimaryAxis>

    <chart:DateTimeAxis AutoScrollingDelta = "3" AutoScrollingMode = "Start">

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis = new DateTimeAxis()
{
      AutoScrollingDelta = 3,
	  
      AutoScrollingMode = ChartAutoScrollingMode.Start
};

Positioning axis labels

Label Placement

The CategoryAxis includes the LabelPlacement property, used to set the labels of the axis between the tick lines or on the tick lines of the category axis. By default the LabelPlacement value for the CategoryAxis is OnTicks.

There are two types of LabelPlacement:

  • BetweenTicks
  • OnTicks

The following code example and screenshot shows LabelPlacement set to OnTicks.

<syncfusion:SfChart.PrimaryAxis>

     <syncfusion:CategoryAxis LabelPlacement="OnTicks" 

         FontSize="16"  />

 </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelPlacement = LabelPlacement.OnTicks

};

Axis label placement support in UWP Chart

The following code example and screenshot shows LabelPlacement set to BetweenTicks.

<syncfusion:SfChart.PrimaryAxis>

    <syncfusion:CategoryAxis LabelPlacement="BetweenTicks" 

           FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelPlacement = LabelPlacement.BetweenTicks

};

Axis label placement support in UWP Chart

Label Position

The LabelsPosition property is used to position the axis label either Inside or Outside the chart plotting area.

The following code example and screenshot illustrate the use of LabelsPosition.

<syncfusion:SfChart.PrimaryAxis>

    <syncfusion:CategoryAxis  LabelsPosition="Inside" 

           FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelsPosition = AxisElementPosition.Inside

};

Axis label positioning support in UWP Chart

<syncfusion:SfChart.PrimaryAxis>

    <syncfusion:CategoryAxis  LabelsPosition="Outside" 

           FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelsPosition = AxisElementPosition.Outside

};

Axis label positioning support in UWP Chart

Positioning Edge Labels

SfChart provides support to customize the edge labels of the axis to adjust its position using the EdgeLabelsDrawingMode property.

The following are the customizing options in EdgeLabelsDrawingMode.

  • Center- Positions the label with tickline as center.
  • Fit- Position the gridline inside based on the edge label size.
  • Hide- Hides the edge labels.
  • Shift- Shifts the edge labels inside to label width.

The following code example and screenshot show EdgeLabelsDrawingMode set to Center.

<syncfusion:SfChart.PrimaryAxis>

  <syncfusion:DateTimeAxis    LabelFormat="MM/yy" EdgeLabelsDrawingMode="Center" FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelFormat = "MM/yy",

    EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center

};

Axis edge label positioning support in UWP Chart

The following code example and screenshot shows EdgeLabelsDrawingMode set to Fit.

<syncfusion:SfChart.PrimaryAxis>

  <syncfusion:DateTimeAxis    LabelFormat="MM/yy" EdgeLabelsDrawingMode="Fit" FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelFormat = "MM/yy",

    EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Fit

};

Axis edge label positioning support in UWP Chart

The following code example and screenshot shows EdgeLabelDrawingMode set to Hide.

<syncfusion:SfChart.PrimaryAxis>

  <syncfusion:DateTimeAxis    LabelFormat="MM/yy" EdgeLabelsDrawingMode="Hide" FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelFormat = "MM/yy",

    EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Hide

};

Axis edge label positioning support in UWP Chart

The following code example and screenshot shows EdgeLabelsDrawingMode set to Shift.

<syncfusion:SfChart.PrimaryAxis>

  <syncfusion:DateTimeAxis    LabelFormat="MM/yy" EdgeLabelsDrawingMode="Shift" FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelFormat = "MM/yy",

    EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift

};

Axis edge label positioning support in UWP Chart

LabelExtent

The LabelExtent property allows us to set the distance between the axis header and the axis label. The following code sample demonstrates the LabelExtent property.

<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis Header="Items" LabelExtent="50"/>
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    Header = "Items",

    LabelExtent = 50

};

Label extent support in UWP Chart

Smart Labels

When a number of axis labels exist, they may overlap with each other. SfChart provides features to handle the overlapping labels using the LabelsIntersectAction property.

The following are the options for intersecting action.

  • None
  • Hide
  • MultipleRows

The following code example and screenshot shows LabelsIntersectAction set to None.

<syncfusion:SfChart.PrimaryAxis>

    <syncfusion:DateTimeAxis   LabelsIntersectAction="None"  

           FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelsIntersectAction = AxisLabelsIntersectAction.None

};

Smart axis labels support in UWP Chart

The following code example and screenshot shows LabelsIntersectAction set to Hide.

<syncfusion:SfChart.PrimaryAxis>

    <syncfusion:DateTimeAxis   LabelsIntersectAction="Hide"  

           FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelsIntersectAction = AxisLabelsIntersectAction.Hide

};

Smart axis labels support in UWP Chart

The following code example and screenshot show LabelsIntersectAction set to MultipleRows.

<syncfusion:SfChart.PrimaryAxis>

    <syncfusion:DateTimeAxis   LabelsIntersectAction="MultipleRows"  

           FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    FontSize = 16,

    LabelsIntersectAction = AxisLabelsIntersectAction.MultipleRows

};

Smart axis labels support in UWP Chart

Custom Labels

SfChart allows user to define the labels for the axis. For defining the axis label you have to set the LabelContent and Position properties.You can define the labels using CustomLabels property as demonstrated in the following code snippet.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis >

<syncfusion:CategoryAxis.CustomLabels>

<syncfusion:ChartAxisLabel Position="0" LabelContent="0-1"/>

<syncfusion:ChartAxisLabel Position="1" LabelContent="1-2"/>

<syncfusion:ChartAxisLabel Position="2" LabelContent="2-3"/>

<syncfusion:ChartAxisLabel Position="3" LabelContent="3-4"/>

<syncfusion:ChartAxisLabel Position="4" LabelContent="4-5"/>

<syncfusion:ChartAxisLabel Position="5" LabelContent="5-5"/>

</syncfusion:CategoryAxis.CustomLabels>

</syncfusion:CategoryAxis>

</syncfusion:SfChart.PrimaryAxis>
CategoryAxis axis = new CategoryAxis();

axis.CustomLabels.Add(new ChartAxisLabel() { Position = 0, LabelContent = "0-1" });

axis.CustomLabels.Add(new ChartAxisLabel() { Position = 1, LabelContent = "1-2" });

axis.CustomLabels.Add(new ChartAxisLabel() { Position = 2, LabelContent = "2-3" });

axis.CustomLabels.Add(new ChartAxisLabel() { Position = 3, LabelContent = "3-4" });

axis.CustomLabels.Add(new ChartAxisLabel() { Position = 4, LabelContent = "4-5" });

axis.CustomLabels.Add(new ChartAxisLabel() { Position = 5, LabelContent = "5-5" });

chart.PrimaryAxis = axis;

Axis label customization support in UWP Chart

You can also directly bind the collection of labels to the LabelsSource property for defining custom labels. The following code example demonstrates how to define a label collection in code behind and binding the property in XAML page.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis LabelsSource="{Binding Labels}" ContentPath="Content" PositionPath="Position">

</syncfusion:CategoryAxis>

</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    ContentPath ="Content",

    PositionPath = "Position",

    LabelsSource = Labels

};


public List<LabelItem> Labels { get; set; }

Labels = new List<LabelItem>
{

    new LabelItem() {Position=0, Content = "0-1"},

    new LabelItem() {Position=1, Content = "1-2"},

    new LabelItem() {Position=2, Content = "2-3"},

    new LabelItem() {Position=3, Content = "3-4"},

    new LabelItem() {Position=4, Content = "4-5"},

    new LabelItem() {Position=5, Content = "5-6"},

    new LabelItem() {Position=6, Content = "6-7"},

    new LabelItem() {Position=7, Content = "7-8"},

};

public class LabelItem
{

    public string Content { get; set; }

    public int Position { get; set; }

}

Axis label customization support in UWP Chart

Add units to labels

You can customize the axis label to display its measuring units by adding a prefix or a suffix. This feature can be achieved using the PrefixLabelTemplate and PostfixLabelTemplate properties.

The following code example and screenshot demonstrate the usage of PrefixLabelTemplate.

  <DataTemplate x:Key="yPrefix">

     <TextBlock FontSize="15" VerticalAlignment="Center" Text="$"/>

  </DataTemplate>

<syncfusion:SfChart.SecondaryAxis>

       <syncfusion:NumericalAxis FontSize="16" Minimum="0" Maximum="1000" PrefixLabelTemplate="{StaticResource yPrefix}" />

</syncfusion:SfChart.SecondaryAxis>
chart.SecondaryAxis = new NumericalAxis()
{

    FontSize = 16,

    Minimum = 0,

    Maximum = 1000,

    PrefixLabelTemplate = this.Resources["yPrefix"] as DataTemplate

};

Adding units to axis labels in UWP Chart

The following code example and screenshot demonstrate the usage of PostfixLabelTemplate.

<DataTemplate x:Key="yPostfix">

       <TextBlock FontSize="8" VerticalAlignment="Top" Text="0"/>

 </DataTemplate>

<chart:SfChart.SecondaryAxis>

       <chart:NumericalAxis FontSize="16" Minimum="0" Maximum="100" PostfixLabelTemplate="{StaticResource yPostfix}" />

</chart:SfChart.SecondaryAxis>
chart.SecondaryAxis = new NumericalAxis()
{

    FontSize = 16,

    Minimum = 0,

    Maximum = 1000,

    PostfixLabelTemplate = this.Resources["yPrefix"] as DataTemplate

};

Adding units to axis labels in UWP Chart

Formatting axis labels

SfChart provides the LabelFormat property for defining the custom formatting for the axis labels. This property supports all standard formatting type of numerical and date time values.

 <syncfusion:SfChart.PrimaryAxis>

      <syncfusion:DateTimeAxis LabelFormat="hh:mm tt" IntervalType="Hours" Interval="1" Header="Computer sales" />

</syncfusion:SfChart.PrimaryAxis>



<syncfusion:SfChart.SecondaryAxis>

      <syncfusion:NumericalAxis Header="Quantity Sold" LabelFormat="##.00"/>

</syncfusion:SfChart.SecondaryAxis>
chart.PrimaryAxis = new DateTimeAxis()
{

    Header = "Computer sales",

    IntervalType = DateTimeIntervalType.Hours,

    Interval = 1,

    LabelFormat = "hh:mm:tt"

};

chart.SecondaryAxis = new NumericalAxis()
{

    Header = "Quantity Sold",

    LabelFormat ="##:00"

};

Axis labels formatting support in UWP Chart

Origin Customization

SfChart allows you to customize the origin. By default the axis will be rendered with(0,0) as origin in x and y-axes.

ShowAxisNextToOrigin

The ShowAxisNextToOrigin property is used to move the axis line to the origin value in Origin property based on x or y-axis. The following code example demonstrates how to shift the axis in the origin value in numerical axis.

<syncfusion:SfChart.SecondaryAxis>

<syncfusion:NumericalAxis Origin="3" ShowAxisNextToOrigin="True">

</syncfusion:NumericalAxis>

</syncfusion:SfChart.SecondaryAxis>
chart.SecondaryAxis = new NumericalAxis()
{

    Origin = 3,

    ShowAxisNextToOrigin = true 
    
};

Moving the axis line to the specified origin value support in UWP Chart

Styling Header and Labels

SfChart provides support to customize the axis Header and label. The following APIs are used to customize the header and label.

HeaderStyle and LabelStyle

Property Definition
HeaderStyle Gets or sets the style for the axis header. The header’s

Foreground

,

FontSize

and

FontFamily

are customized using this property.
LabelStyle Gets or sets the style for the axis labels. The label’s

Foreground

,

FontSize

and

FontFamily

are customized using this property.
<syncfusion:SfChart Height="250" Width="500">

            < syncfusion:SfChart.PrimaryAxis>

                < syncfusion:CategoryAxis  Header="City">

                    < syncfusion:CategoryAxis.LabelStyle>

                        < syncfusion:LabelStyle FontSize="10" FontFamily="Arial" Foreground="Green" ></syncfusion:LabelStyle>

                    </syncfusion:CategoryAxis.LabelStyle>

                </syncfusion:CategoryAxis>

            </syncfusion:SfChart.PrimaryAxis>

            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:NumericalAxis x:Name="axis" Header="Year" >

                    <syncfusion:NumericalAxis.LabelStyle >

                        <syncfusion:LabelStyle FontSize="10" Foreground="Green" FontFamily="Arial" ></syncfusion:LabelStyle>

                    </syncfusion:NumericalAxis.LabelStyle>

                </syncfusion:NumericalAxis>

            </syncfusion:SfChart.SecondaryAxis>

            <syncfusion:LineSeries XBindingPath="City" YBindingPath="Year1950" ItemsSource="{Binding PopulationPercent}"></syncfusion:LineSeries>

        </syncfusion:SfChart>
SfChart chart = new SfChart();

LabelStyle labelStyle;

chart.PrimaryAxis = new CategoryAxis() { Header = "City" };

labelStyle = new LabelStyle()
{

    FontSize = 10,

    FontFamily = new FontFamily("Arial"),

    Foreground = new SolidColorBrush(Colors.Green)

};

chart.PrimaryAxis.LabelStyle = labelStyle;

chart.SecondaryAxis = new NumericalAxis()
{

    Header = "Year",

};

chart.SecondaryAxis.LabelStyle = labelStyle;

LineSeries series = new LineSeries()
{

    ItemsSource = new ViewModel().PopulationPercent,

    XBindingPath = "City",

    YBindingPath = "Year1950"

};

chart.Series.Add(series);

Axis Label Border

ChartAxis provides support to place border around its label.To place the border around axis, we should enable ShowLabelBorder property of axis and it can be set as shown in the below code snippet,

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis ShowLabelBorder="True"/>

</syncfusion:SfChart.PrimaryAxis>

<syncfusion:SfChart.SecondaryAxis>

<syncfusion:NumericalAxis ShowLabelBorder="True"  />       

</syncfusion:SfChart.SecondaryAxis>
chart.PrimaryAxis = new CategoryAxis()
            
{
     ShowLabelBorder = true,                
};

chart.SecondaryAxis = new NumericalAxis()

{
    ShowLabelBorder = true
};

Axis labels border support in UWP Chart

The border color and width can be customized with LabelBorderBrush and LabelBorderWidth properties of chart axis and it can be set as shown in the below code snippet,

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis LabelBorderWidth="3" ShowLabelBorder="True" LabelBorderBrush="Red"/>

</syncfusion:SfChart.PrimaryAxis>

<syncfusion:SfChart.SecondaryAxis>

</syncfusion:NumericalAxis ShowLabelBorder="True"  LabelBorderWidth="3" LabelBorderBrush="Red"/>       

</syncfusion:SfChart.SecondaryAxis>
chart.PrimaryAxis = new CategoryAxis()
            
{
    ShowLabelBorder = true,  

    LabelBorderWidth = 3,

    LabelBorderBrush = new SolidColorBrush(Colors.Red)
           
};

chart.SecondaryAxis = new NumericalAxis()

{
       ShowLabelBorder = true,

       LabelBorderWidth = 3,

       LabelBorderBrush = new SolidColorBrush(Colors.Red),
               
};

Axis labels border support in UWP Chart

GridLines and TickLines

GridLines

By default, gridlines are automatically added to the ChartAxis in its defined intervals. SfChart supports customization of gridline. You can control the visibility of the gridlines using the ShowGridLines property.

The following code example and screenshot show ShowGridLines set to False.

<syncfusion:SfChart.PrimaryAxis>

    <syncfusion:CategoryAxis ShowGridLines="False" 

           FontSize="16"  />

    </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{

    ShowGridLines = false,

    FontSize = 16

};

Gridlines customization support in UWP Chart

Ticklines

Ticklines are small markers extending from the gridlines, used to indicate the axis scaling. Tickline can be positioned either inside or outside of the axis line.

The following code example and screenshot illustrate major and small ticklines set to Inside.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:NumericalAxis LabelsPosition="Inside" TickLineSize="10" SmallTickLineSize="5" TickLinesPosition="Inside" SmallTickLinesPosition="Inside" SmallTicksPerInterval="2"  FontSize="16"  />

            </syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new NumericalAxis()
{

    LabelsPosition = AxisElementPosition.Inside,

    TickLineSize = 10,

    SmallTickLineSize = 5,

    TickLinesPosition = AxisElementPosition.Inside,

    SmallTickLinesPosition = AxisElementPosition.Inside,

    SmallTicksPerInterval = 2,

    FontSize = 16

};

Ticklines customization support in UWP Chart

You can customize the appearance of major gridline, minor gridlines and ticklines using the MajorTickLineStyle, MinorTickLineStyle, MajorGridLineStyle and MinorGridLineStyle properties. Also axis lines can be customized using AxisLineStyle as follows.

<syncfusion:SfChart>

   <syncfusion:SfChart.Resources>

                <Style x:Key="majorTickLineStyle" TargetType="Line">

                    <Setter Property="Stroke" Value="Red"/>

                    <Setter Property="StrokeThickness" Value="1"/>

                </Style>

                <Style x:Key="minorTickLineStyle" TargetType="Line">

                    <Setter Property="Stroke" Value="Green"/>

                    <Setter Property="StrokeThickness" Value="1"/>

                </Style>

                <Style x:Key="axisLineStyle" TargetType="Line">

                    <Setter Property="Stroke" Value="OrangeRed"/>

                    <Setter Property="StrokeThickness" Value="1"/>

                </Style>

                <Style x:Key="majorGridLineStyle" TargetType="Line">

                <Setter Property="Stroke" Value="Gray"/>

                <Setter Property="StrokeThickness" Value="1"/>

                    <Setter Property="StrokeDashArray" Value="4,2"/>

                 </Style>

                <Style x:Key="minorGridLineStyle" TargetType="Line">

                    <Setter Property="Stroke" Value="Gray"/>

                    <Setter Property="StrokeThickness" Value="1"/>

                    <Setter Property="StrokeDashArray" Value="1,2"/>

                </Style>

  </syncfusion:SfChart.Resources>



  <syncfusion:SfChart.PrimaryAxis>

                <syncfusion:DateTimeAxis  MajorGridLineStyle="{StaticResource majorGridLineStyle }"

                    MinorGridLineStyle="{StaticResource minorGridLineStyle}"

                    MajorTickLineStyle="{StaticResource majorTickLineStyle}"

                    MinorTickLineStyle="{StaticResource minorTickLineStyle}"

                    AxisLineStyle="{StaticResource axisLineStyle}"       

                    SmallTicksPerInterval="1" TickLineSize="10"

                    SmallTickLineSize="6" LabelFormat="yyyy"

                   />

            </syncfusion:SfChart.PrimaryAxis>

            <syncfusion:SfChart.SecondaryAxis>

                <syncfusion:NumericalAxis MajorTickLineStyle="{StaticResource majorTickLineStyle}"

                      MajorGridLineStyle="{StaticResource majorGridLineStyle }"

                      MinorGridLineStyle="{StaticResource minorGridLineStyle}"

                      MinorTickLineStyle="{StaticResource minorTickLineStyle}"

                      AxisLineStyle="{StaticResource axisLineStyle}"       

                      SmallTicksPerInterval="1" TickLineSize="10"

                      SmallTickLineSize="5" HorizontalAlignment="Right"  

            </syncfusion:SfChart.SecondaryAxis>



            <syncfusion:FastLineBitmapSeries   XBindingPath="Date" YBindingPath="Value" >

            </syncfusion:FastLineBitmapSeries>

        </syncfusion:SfChart>
chart.PrimaryAxis = new DateTimeAxis()
{

    MajorGridLineStyle = chart.Resources[" majorGridLineStyle"] as Style,

    MinorGridLineStyle = chart.Resources["minorGridLineStyle"] as Style,

    MajorTickLineStyle = chart.Resources["majorTickLineStyle"] as Style,

    MinorTickLineStyle = chart.Resources["minorTickLineStyle"] as Style,

    AxisLineStyle = chart.Resources["axisLineStyle"] as Style,

    TickLineSize = 10,

    SmallTickLineSize = 6,

    SmallTicksPerInterval = 1,

    LabelFormat = "yyyy"

};

chart.SecondaryAxis = new NumericalAxis()
{

    MajorGridLineStyle = chart.Resources[" majorGridLineStyle"] as Style,

    MinorGridLineStyle = chart.Resources["minorGridLineStyle"] as Style,

    MajorTickLineStyle = chart.Resources["majorTickLineStyle"] as Style,

    MinorTickLineStyle = chart.Resources["minorTickLineStyle"] as Style,

    AxisLineStyle = chart.Resources["axisLineStyle"] as Style,

    TickLineSize = 10,

    SmallTickLineSize = 6,

    SmallTicksPerInterval = 1,

    HorizontalAlignment = HorizontalAlignment.Center

};

FastLineBitmapSeries series = new FastLineBitmapSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Date",

    YBindingPath = "Value"

};

chart.Series.Add(series);

Gridlines customization support in UWP Chart

Customize individual axis elements

The RangeStyles can be used to customize the gridlines, ticks and axis labels for a specific region of ChartAxis. The following properties are used to customize the specific range in an axis:

<syncfusion:SfChart.Resources>

         <Style TargetType="Line" x:Key="RangeLineStyle">

                <Setter Property="StrokeThickness" Value="2"/>

                <Setter Property="Stroke" Value="RoyalBlue"/>

        </Style>

         <Style TargetType="Line" x:Key="lineStyle">

                <Setter Property="StrokeThickness" Value="2"/>

                <Setter Property="Stroke" Value="Green"/>

        </Style>

</syncfusion:SfChart.Resources>

<syncfusion:SfChart.SecondaryAxis>  

    <syncfusion:NumericalAxis MajorGridLineStyle= "{StaticResource lineStyle}" MajorTickLineStyle="{StaticResource lineStyle}">  
        <syncfusion:NumericalAxis.LabelStyle>
            <syncfusion:LabelStyle Foreground="Green"/>
        </syncfusion:NumericalAxis.LabelStyle>
        <syncfusion:NumericalAxis.RangeStyles>
                <syncfusion:ChartAxisRangeStyleCollection>
                      <syncfusion:ChartAxisRangeStyle Start="18" End="22" MajorGridLineStyle= "{StaticResource RangeLineStyle}" MajorTickLineStyle="{StaticResource RangeLineStyle}">                     <syncfusion:ChartAxisRangeStyle.LabelStyle>
            <syncfusion:LabelStyle Foreground="RoyalBlue" />
          </syncfusion:ChartAxisRangeStyle.LabelStyle>
                     </syncfusion:ChartAxisRangeStyle>
                </syncfusion:ChartAxisRangeStyleCollection>
            </syncfusion:NumericalAxis.RangeStyles>
    </syncfusion:NumericalAxis>

</syncfusion:SfChart.SecondaryAxis>
NumericalAxis secondaryAxis = new NumericalAxis();

            secondaryAxis.MajorGridLineStyle = chart.Resources["lineStyle"] as Style ;

            secondaryAxis.MajorTickLineStyle = chart.Resources["lineStyle"] as Style;

            secondaryAxis.LabelStyle.Foreground = new SolidColorBrush(Colors.Green);

            ChartAxisRangeStyleCollection axisRangeStyles = new ChartAxisRangeStyleCollection();

            ChartAxisRangeStyle rangeStyle = new ChartAxisRangeStyle() { Start = 18, End = 22 };

            rangeStyle.MajorGridLineStyle = chart.Resources["RangeLineStyle"] as Style ;

            rangeStyle.LabelStyle = new LabelStyle();

            rangeStyle.LabelStyle.Foreground = new SolidColorBrush(Colors.RoyalBlue);

            rangeStyle.MajorTickLineStyle = chart.Resources["RangeLineStyle"] as Style;
            
            axisRangeStyles.Add(rangeStyle);

            secondaryAxis.RangeStyles = axisRangeStyles;

       chart.SecondaryAxis = secondaryAxis;

RangeStyle support in UWP Chart

Multi-level Labels

Axis can be customized with multiple levels of label by using its MultiLevelLabels property. These labels are placed based on the provided Start and End range values and we can add any number of labels to an axis. The below code snippet shows how to set a multilevel label,

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis ShowLabelBorder="True">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1" />

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
     ShowLabelBorder = true,
            
};
            
ChartMultiLevelLabel label = new ChartMultiLevelLabel()
           
{
 
       Start = -0.5,

       End = 2.5,

       Text = "Quarter 1"

};

chart.PrimaryAxis.MultiLevelLabels.Add(label);

Multi-level axis labels support in UWP Chart

Regarding Start and End Property

Start and End properties of ChartMultiLevelLabel are type of objects, we can provide the start and end values for a multi-level label based on its Axis type. It is described in the following table,

S.No Axis Type Start/End value Example
1 CategoryAxis Index-Based Start=0(zeroth index position) End = 1(first index position)
2 DateTimeCategoryAxis Index-Based Start = 0(zeroth index position) End = 1(first index position)
3 NumericalAxis Value-Based Start= 5( Value) End= 10( Value)
4 LogarithmicAxis Value-Based Start= 10(Value) End= 1000(Value)
5 DateTimeAxis Value-Based Start = "2017/01/01" End="2017/01/02"
6 TimeSpanAxis Value-Based Start = "00:00:01" End="00:00:05"

Customizing multi-level labels

Border Customization

ChartMultiLevelLabel's border width and color can be customized with LabelBorderWidth and LabelBorderBrush properties of chart axis.It can be set as shown in the below code snippet,

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis  LabelBorderBrush="Red" LabelBorderWidth="3"  ShowLabelBorder="True">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"  />

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
    LabelBorderWidth = 3,

    ShowLabelBorder = true,

    LabelBorderBrush = new SolidColorBrush(Colors.Red),
            
};
            
ChartMultiLevelLabel label = new ChartMultiLevelLabel()
           
{
 
       Start = -0.5,

       End = 2.5,

       Text = "Quarter 1",

       BorderWidth = 4

};

chart.PrimaryAxis.MultiLevelLabels.Add(label);

Axis border customization support in UWP Chart

Border Type

ChartAxis provides support to various types of border for ChartMultiLevelLabels and it can be applied by using its MultiLevelLabelsBorderType property.The default MultiLevelLabelsBorderType is Rectangle. The another supported border types are Brace,None and WithoutTopAndBottomBorder.

Rectangle

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis  ShowLabelBorder="True">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1" />

<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>

<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>

<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis  ShowLabelBorder="True">
                    
<chart:NumericalAxis.MultiLevelLabels>
                    
<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low"/>

<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>

<chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
                    
</chart:NumericalAxis.MultiLevelLabels>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
     ShowLabelBorder = true,          
};

ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
            
{
                
     Start = -0.5,

     End = 2.5,

     Text = "Quarter 1",
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label1);

ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
           
{
    
    Start = 2.5,
                
    End = 5.5,
                
    Text = "Quarter 2"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label2);

ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()

{
     
    Start = 5.5,
                
    End = 8.5,
                
    Text = "Quarter 3"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label3);

ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()

{
     Start = 8.5,
               
     End = 11.5,
                
     Text = "Quarter 4"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label4);

chart.SecondaryAxis = new NumericalAxis()

{
      ShowLabelBorder = true,
};

ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
            
{
                
     Start = 32,
                
     End = 36,
     
     Text = "Low"
            
};
            
chart.SecondaryAxis.MultiLevelLabels.Add(label5);
            
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()

{
    Start = 36,
                
    End = 42,
    
    Text = "Medium"
};

chart.SecondaryAxis.MultiLevelLabels.Add(label6);

ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()

{
     Start = 42,
     
     End = 48,
    
     Text = "High"
};

chart.SecondaryAxis.MultiLevelLabels.Add(label7);

Axis border customization support in UWP Chart

Brace

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis MultiLevelLabelsBorderType="Brace" ShowLabelBorder="True">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1"  />

<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"  />

<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"  />

<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4" />

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis MultiLevelLabelsBorderType="Brace" ShowLabelBorder="True">
                    
<chart:NumericalAxis.MultiLevelLabels>
                    
<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low" />

<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>

<chart:ChartMultiLevelLabel Start="42" End="48" Text="High" />
                    
</chart:NumericalAxis.MultiLevelLabels>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
   ShowLabelBorder = true,
  
   MultiLevelLabelsBorderType = BorderType.Brace
            
};

ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
            
{
                
     Start = -0.5,

     End = 2.5,

     Text = "Quarter 1",
};

chart.PrimaryAxis.MultiLevelLabels.Add(label1);

ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
           
{
    
    Start = 2.5,
                
    End = 5.5,
                
    Text = "Quarter 2",
};

chart.PrimaryAxis.MultiLevelLabels.Add(label2);

ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()

{
     
    Start = 5.5,
                
    End = 8.5,
                
    Text = "Quarter 3",
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label3);

ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()

{
     Start = 8.5,
               
     End = 11.5,
                
     Text = "Quarter 4",
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label4);

chart.SecondaryAxis = new NumericalAxis()

{
   ShowLabelBorder = true,

   MultiLevelLabelsBorderType = BorderType.Brace
};

ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
            
{
                
     Start = 32,
                
     End = 36,
     
     Text = "Low",
            
};
            
chart.SecondaryAxis.MultiLevelLabels.Add(label5);
            
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()

{
    Start = 36,
                
    End = 42,
    
    Text = "Medium",
};

chart.SecondaryAxis.MultiLevelLabels.Add(label6);

ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()

{
     Start = 42,
     
     End = 48,
    
     Text = "High",
};

chart.SecondaryAxis.MultiLevelLabels.Add(label7);

Axis border customization support in UWP Chart

None

<chart:SfChart.PrimaryAxis  MultiLevelLabelsBorderType="None" ShowLabelBorder="True">

<chart:CategoryAxis>

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1" />

<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2" />

<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3" />

<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4" />

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis MultiLevelLabelsBorderType="None" ShowLabelBorder="True">
                    
<chart:NumericalAxis.MultiLevelLabels>
                    
<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low" />

<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium" />

<chart:ChartMultiLevelLabel Start="42" End="48" Text="High" />
                    
</chart:NumericalAxis.MultiLevelLabels>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
    ShowLabelBorder = true,          

    MultiLevelLabelsBorderType = BorderType.None
            
};

ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
            
{
                
     Start = -0.5,

     End = 2.5,

     Text = "Quarter 1"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label1);

ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
           
{
    
    Start = 2.5,
                
    End = 5.5,
                
    Text = "Quarter 2"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label2);

ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()

{
     
    Start = 5.5,
                
    End = 8.5,
                
    Text = "Quarter 3"
};

chart.PrimaryAxis.MultiLevelLabels.Add(label3);

ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()

{
     Start = 8.5,
               
     End = 11.5,
                
     Text = "Quarter 4"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label4);

chart.SecondaryAxis = new NumericalAxis()

{
    
    ShowLabelBorder = true,          

    MultiLevelLabelsBorderType = BorderType.None

};

ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
            
{
                
     Start = 32,
                
     End = 36,
     
     Text = "Low"
            
};
            
chart.SecondaryAxis.MultiLevelLabels.Add(label5);
            
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()

{
    Start = 36,
                
    End = 42,
    
    Text = "Medium"
};

chart.SecondaryAxis.MultiLevelLabels.Add(label6);

ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()

{
     Start = 42,
     
     End = 48,
    
     Text = "High"
};

chart.SecondaryAxis.MultiLevelLabels.Add(label7);

Axis border customization support in UWP Chart

WithoutTopAndBottomBorder

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis   ShowLabelBorder="True" MultiLevelLabelsBorderType="WithoutTopAndBottomBorder">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1"/>

<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2" />

<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3" />

<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4" />

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis  ShowLabelBorder="True" MultiLevelLabelsBorderType="WithoutTopAndBottomBorder">
                    
<chart:NumericalAxis.MultiLevelLabels>
                    
<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low" />

<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>

<chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
                    
</chart:NumericalAxis.MultiLevelLabels>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
   ShowLabelBorder = true,

   MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder
            
};

ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
            
{
                
     Start = -0.5,

     End = 2.5,

     Text = "Quarter 1",
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label1);

ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
           
{
    
    Start = 2.5,
                
    End = 5.5,
                
    Text = "Quarter 2",
           
};

chart.PrimaryAxis.MultiLevelLabels.Add(label2);

ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()

{
     
    Start = 5.5,
                
    End = 8.5,
                
    Text = "Quarter 3",
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label3);

ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()

{
     Start = 8.5,
               
     End = 11.5,
                
     Text = "Quarter 4",
};

chart.PrimaryAxis.MultiLevelLabels.Add(label4);

chart.SecondaryAxis = new NumericalAxis()

{
    
    ShowLabelBorder = true,

   MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder

};

ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
            
{
                
     Start = 32,
                
     End = 36,
     
     Text = "Low",
            
};
            
chart.SecondaryAxis.MultiLevelLabels.Add(label5);
            
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()

{
    Start = 36,
                
    End = 42,
    
    Text = "Medium",
};

chart.SecondaryAxis.MultiLevelLabels.Add(label6);

ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()

{
     Start = 42,
     
     End = 48,
    
     Text = "High",
};

chart.SecondaryAxis.MultiLevelLabels.Add(label7);

Axis border customization support in UWP Chart

Text Customization

ChartMultiLevelLabel's text can be customized with its FontSize, FontFamily and Foreground property and it is shown in below code snippet,

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis  ShowLabelBorder="True">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="11.5" FontFamily="Algerian" Foreground="Blue" FontSize="14" Text="Year - 2016"/>

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
      ShowLabelBorder = true,            
};
            
ChartMultiLevelLabel label = new ChartMultiLevelLabel()
           
{
 
    Start = -0.5,
                
    End = 11.5,
                
    Text = "Year - 2016",
                
    Foreground = new SolidColorBrush(Colors.Blue),
                
    FontSize = 14,
                
    FontFamily = new FontFamily("Algerian")

};

chart.PrimaryAxis.MultiLevelLabels.Add(label);

Multi-level axis labels text customization support in UWP Chart

Label Alignment

The text of ChartMultiLevelLabel can be aligned with its LabelAlignment property. The default value of LabelAlignment property is Center.

Center

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis  ShowLabelBorder="True">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1" />

<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>

<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>

<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis ShowLabelBorder="True">
                    
<chart:NumericalAxis.MultiLevelLabels>
                    
<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low"/>

<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>

<chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
                    
</chart:NumericalAxis.MultiLevelLabels>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
     ShowLabelBorder = true,                       
};

ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
            
{
                
     Start = -0.5,

     End = 2.5,

     Text = "Quarter 1",
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label1);

ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
           
{
    
    Start = 2.5,
                
    End = 5.5,
                
    Text = "Quarter 2"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label2);

ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()

{
     
    Start = 5.5,
                
    End = 8.5,
                
    Text = "Quarter 3"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label3);

ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()

{
     Start = 8.5,
               
     End = 11.5,
                
     Text = "Quarter 4"
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label4);

chart.SecondaryAxis = new NumericalAxis()

{
      ShowLabelBorder = true,            
};

ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
            
{
                
     Start = 32,
                
     End = 36,
     
     Text = "Low"
            
};
            
chart.SecondaryAxis.MultiLevelLabels.Add(label5);
            
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()

{
    Start = 36,
                
    End = 42,
    
    Text = "Medium"
};

chart.SecondaryAxis.MultiLevelLabels.Add(label6);

ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()

{
     Start = 42,
     
     End = 48,
    
     Text = "High"
};

chart.SecondaryAxis.MultiLevelLabels.Add(label7);

Multi-level axis label alignment support in UWP Chart

Near

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis ShowLabelBorder="True">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1"   LabelAlignment="Near" />

<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"  LabelAlignment="Near"/>

<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"  LabelAlignment="Near"/>

<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"  LabelAlignment="Near"/>

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis ShowLabelBorder="True">
                    
<chart:NumericalAxis.MultiLevelLabels>
                    
<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low"  LabelAlignment="Near"/>

<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"  LabelAlignment="Near"/>

<chart:ChartMultiLevelLabel Start="42" End="48" Text="High"  LabelAlignment="Near"/>
                    
</chart:NumericalAxis.MultiLevelLabels>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
    ShowLabelBorder = true,                       
};

ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
            
{
                
     Start = -0.5,

     End = 2.5,

     Text = "Quarter 1",
    
     LabelAlignment = LabelAlignment.Near
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label1);

ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
           
{
    
    Start = 2.5,
                
    End = 5.5,
                
    Text = "Quarter 2",

    LabelAlignment = LabelAlignment.Near
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label2);

ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()

{
     
    Start = 5.5,
                
    End = 8.5,
                
    Text = "Quarter 3",

    LabelAlignment = LabelAlignment.Near
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label3);

ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()

{
     Start = 8.5,
               
     End = 11.5,
                
     Text = "Quarter 4",

     LabelAlignment = LabelAlignment.Near
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label4);

chart.SecondaryAxis = new NumericalAxis()

{   
    ShowLabelBorder = true,            
};

ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
            
{
                
     Start = 32,
                
     End = 36,
     
     Text = "Low",

     LabelAlignment = LabelAlignment.Near
            
};
            
chart.SecondaryAxis.MultiLevelLabels.Add(label5);
            
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()

{
    Start = 36,
                
    End = 42,
    
    Text = "Medium",

    LabelAlignment = LabelAlignment.Near
};

chart.SecondaryAxis.MultiLevelLabels.Add(label6);

ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()

{
     Start = 42,
     
     End = 48,
    
     Text = "High",

     LabelAlignment = LabelAlignment.Near
};

chart.SecondaryAxis.MultiLevelLabels.Add(label7);

Multi-level axis label alignment support in UWP Chart

Far

<chart:SfChart.PrimaryAxis>

<chart:CategoryAxis  ShowLabelBorder="True">

<chart:CategoryAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1"   LabelAlignment="Far" />

<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"  LabelAlignment="Far"/>

<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"  LabelAlignment="Far"/>

<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"  LabelAlignment="Far"/>

</chart:CategoryAxis.MultiLevelLabels>

</chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis  ShowLabelBorder="True">
                    
<chart:NumericalAxis.MultiLevelLabels>
                    
<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low"  LabelAlignment="Far"/>

<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"  LabelAlignment="Far"/>

<chart:ChartMultiLevelLabel Start="42" End="48" Text="High" LabelAlignment="Far"/>
                    
</chart:NumericalAxis.MultiLevelLabels>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>
chart.PrimaryAxis =  new CategoryAxis()
            
{
      ShowLabelBorder = true,          
};

ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
            
{
                
     Start = -0.5,

     End = 2.5,

     Text = "Quarter 1",
    
     LabelAlignment = LabelAlignment.Near
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label1);

ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
           
{
    
    Start = 2.5,
                
    End = 5.5,
                
    Text = "Quarter 2",

    LabelAlignment = LabelAlignment.Near
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label2);

ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()

{
     
    Start = 5.5,
                
    End = 8.5,
                
    Text = "Quarter 3",

    LabelAlignment = LabelAlignment.Near
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label3);

ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()

{
     Start = 8.5,
               
     End = 11.5,
                
     Text = "Quarter 4",

     LabelAlignment = LabelAlignment.Near
            
};

chart.PrimaryAxis.MultiLevelLabels.Add(label4);

chart.SecondaryAxis = new NumericalAxis()

{
      ShowLabelBorder = true,          
};

ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
            
{
                
     Start = 32,
                
     End = 36,
     
     Text = "Low",

     LabelAlignment = LabelAlignment.Near
            
};
            
chart.SecondaryAxis.MultiLevelLabels.Add(label5);
            
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()

{
    Start = 36,
                
    End = 42,
    
    Text = "Medium",

    LabelAlignment = LabelAlignment.Near
};

chart.SecondaryAxis.MultiLevelLabels.Add(label6);

ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()

{
     Start = 42,
     
     End = 48,
    
     Text = "High",

     LabelAlignment = LabelAlignment.Near
};

chart.SecondaryAxis.MultiLevelLabels.Add(label7);

Multi-level axis label alignment support in UWP Chart

The text of ChartMultiLevelLabel text will automatically trim, when the text width exceeds the width of ChartMultiLevelLabel and it is shown below,

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis ShowLabelBorder="True">

<chart:NumericalAxis.MultiLevelLabels>

<chart:ChartMultiLevelLabel Start="32" End="36" Text="Low Temperature"/>

<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium Temperature"/>
                        
<chart:ChartMultiLevelLabel Start="42" End="48" Text="High Temperature"/>

</chart:NumericalAxis.MultiLevelLabels>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>
chart.SecondaryAxis = new NumericalAxis()
            
{
     ShowLabelBorder = true,          
};

ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
            
{
                
        Start = 32,
        
        End = 36,
        
        Text = "Low Temperature"
};

chart.SecondaryAxis.MultiLevelLabels.Add(label5);

ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()

{
        Start = 36,
                
        End = 42,
        
        Text = "Medium Temperature"
            
};
    
chart.SecondaryAxis.MultiLevelLabels.Add(label6);

ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()

{
                
       Start = 42,
               
       End = 48,
       
       Text = "High Temperature"
 
 };

 chart.SecondaryAxis.MultiLevelLabels.Add(label7);

Multi-level axis label alignment support in UWP Chart

Events

ActualRangeChanged

The ActualRangeChanged event occurs when an axis range is changed. This argument contains the following information.

LabelCreated

The LabelCreated event occurs when the axis label is created. This argument contains AxisLabel of ChartAxisLabel, which contains the following properties.

AxisBoundsChanged

The AxisBoundsChanged event occurs when the bounds of the axis are changed. This argument contains the following information.

LabelClicked

The LabelClicked event is triggered when labels are clicked. Supports for 2D axis. The argument contains AxisLabel of ChartAxisLabel, which contains the following properties.