1. Add the ChartView object so you can set titles for the X-Axis and Y-axis 

The ChartView object represents the area of the chart that contains data (including the axes). For more information on the chart axes, see Axes. The axis titles are UIElement objects rather than simple text. In this example we will use TextBlock elements to assign the text to the X-Axis and Y-Axis titles. Once we add the TextBlock element we can then format the text by changing its foreground color and aligning it to the center.

XAML

Copy Code

<c1chart:C1Chart > <c1chart:C1Chart.View> <c1chart:ChartView> <c1chart:ChartView.AxisX> <c1chart:Axis> <c1chart:Axis.Title> <TextBlock Text="Price" TextAlignment="Center" Foreground="Crimson"/> </c1chart:Axis.Title> </c1chart:Axis> </c1chart:ChartView.AxisX> <c1chart:ChartView.AxisY> <c1chart:Axis> <c1chart:Axis.Title> <TextBlock Text="Kitchen Electronics" TextAlignment="Center" Foreground="Crimson"/> </c1chart:Axis.Title> </c1chart:Axis> </c1chart:ChartView.AxisY> </c1chart:ChartView> </c1chart:C1Chart.View> </c1chart:C1Chart>

 

2. Configure the value of the X-Axis to start at zero and change the default AxisX.MajorUnit unit value from 50 to 20. Also set the AutoMin property to False so we can have the value begin at zero instead of the minimum data value. Your XAML code for the View object should now appear like the following:

XAML

Copy Code

<c1chart:C1Chart.View> <c1chart:ChartView> <c1chart:ChartView.AxisX> <c1chart:Axis Min="0" Max="500" MajorUnit="20" AutoMin="False"> <c1chart:Axis.Title> <TextBlock Text="Price" TextAlignment="Center" Foreground="Crimson" /> </c1chart:Axis.Title> </c1chart:Axis> </c1chart:ChartView.AxisX> <c1chart:ChartView.AxisY> <c1chart:Axis> <c1chart:Axis.Title> <TextBlock Text="Kitchen Electronics" TextAlignment="Center" Foreground="Crimson" /> </c1chart:Axis.Title> </c1chart:Axis> </c1chart:ChartView.AxisY> </c1chart:ChartView> </c1chart:C1Chart.View>

3. Within the <c1chart:Axis></c1chart:Axis> of the ChartView.AxisX object set the AnnoFormat to change the numeric x-values along the x-axis to currency and the AnnoAngle property to rotate the X-Axis annotation to 60 degrees counterclockwise.

XAML	Copy Code
<c1chart:Axis AnnoFormat="c" AnnoAngle="60" />

4. Within the <c1chart:Axis></c1chart:Axis> of the ChartView.AxisY object set the Reversed property to True to reverse the direction of the Y-Axis.

Add the following code in the Public MainPage() class to format the chart axes: 

' set axes titles
   C1Chart1.View.AxisY.Title = New TextBlock(New Run("Kitchen Electronics"))
   C1Chart1.View.AxisX.Title = New TextBlock(New Run("Price"))

   ' set axes bounds
   C1Chart1.View.AxisX.Min = 0
   C1Chart1.View.AxisX.Max = 500
   c1Chart1.View.AxisX.MajorUnit = 20

   ' Financial formatting
   C1Chart1.View.AxisX.AnnoFormat = "c"

   ' axis annotation rotation
   C1Chart1.View.AxisX.AnnoAngle = "60"

// set axes titles
   c1Chart1.View.AxisY.Title= new TextBlock() { Text = "Kitchen Electronics" };
   c1Chart1.View.AxisX.Title = new TextBlock() { Text = "Price" };

   // set axes bounds
   c1Chart1.View.AxisX.Min = 0;
   c1Chart1.View.AxisX.Max = 500;
   c1Chart1.View.AxisX.MajorUnit = 20;

   // financial formatting
   c1Chart1.View.AxisX.AnnoFormat = "c";

   // axis annotation rotation
   c1Chart1.View.AxisX.AnnoAngle=60;