Using XValue and AxisXLabel

This topic will give you a description how to create chart using XValue and AxisXLabel properties in DataPoints.

 

Using XValue

 

XValue determines the position of the DataPoint on AxisX. It should be numeric and it is shown when AxisXLabel property is not set in DataPoints for all DataSeries. If XValue is not set in DataPoints, it will be generated automatically depending upon the DataPoint index. You can set any XValue for DataPoints in order to position them accordingly. XValue can be set as a numeric value or DateTime value.

 

Example: Below is the chart where DataPoints are appearing at 1st, 2nd , 4th, 5th,  6th position.

 

 

Below is the XAML for the above chart.

 

 

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300">
   
   <vc:Chart.Series>
      <vc:DataSeries>
         <vc:DataSeries.DataPoints>
            <vc:DataPoint XValue="1" YValue="10" />
            <vc:DataPoint XValue="2" YValue="20" />
            <vc:DataPoint XValue="4" YValue="40" />
            <vc:DataPoint XValue="5" YValue="50" />
            <vc:DataPoint XValue="6" YValue="30" />
         </vc:DataSeries.DataPoints>
      </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

 

 

Using AxisXLabel

 

In order to set custom labels in AxisX then you can do so by setting AxisXLabel property in each DataPoint. Any sting can be added as  an AxisXLabel.

 

Example: Below is the chart where AxisLabels are appearing for each DataPoint.

 

 

Below is the XAML for the above chart.

 

 

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300">
   
   <vc:Chart.Series>
      <vc:DataSeries>
         <vc:DataSeries.DataPoints>
            <vc:DataPoint AxisXLabel="Jan" YValue="10" />
            <vc:DataPoint AxisXLabel="Feb" YValue="20" />
            <vc:DataPoint AxisXLabel="Mar" YValue="40" />
            <vc:DataPoint AxisXLabel="Apr" YValue="50" />
            <vc:DataPoint AxisXLabel="May" YValue="30" />
         </vc:DataSeries.DataPoints>
      </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

 

 

In case you set both the XValue and AxisXLabel in DataPoints, then the DataPoints are placed according to XValue and XValues are replaced by AxisXLabels wherever available. Below is an example.

 

 

Below is the XAML for the above chart.

 

 

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300">
   
   <vc:Chart.Series>
      <vc:DataSeries>
         <vc:DataSeries.DataPoints>
            <vc:DataPoint XValue="1" YValue="10" />
            <vc:DataPoint XValue="2" YValue="20" />
            <vc:DataPoint XValue="4" YValue="40" />
            <vc:DataPoint XValue="5" AxisXLabel="Apr" YValue="50" />
            <vc:DataPoint XValue="6" YValue="30" />
         </vc:DataSeries.DataPoints>
      </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

 

 

 

See Also:

    1. DateTime Overview

    2. Accessing DateTime XValue on Mouse Events of PlotArea Using Javascript

    3. Getting Rid of Gap Wherever DataPoints are Missing in CandleStick Chart