SfChart Adornment label and Axis auto Interval

[Alexey]

Hello,

 

I'm trying to use SfChart control with Column series.

I have a problem with displaying adornment labels above of columns.

When axis auto interval is in use, the control does not show adornment labels for columns with maximum secondary axis value.

Here is xaml example:

<Charts:SfChart x:Name="sfChart">

<Charts:SfChart.Resources>

<DataTemplate x:Key="labelTemplate">    

<TextBlock Text="{Binding Converter={StaticResource AmountStringConverter}}" FontFamily="Segoe UI Light" FontSize="15"/>

</DataTemplate>

</Charts:SfChart.Resources>    

<Charts:SfChart.Behaviors>

<Charts:ChartZoomPanBehavior/>

</Charts:SfChart.Behaviors>

<Charts:SfChart.PrimaryAxis>

<Charts:CategoryAxis LabelFormat="MMM yy" PlotOffset="10" />

</Charts:SfChart.PrimaryAxis>

<Charts:SfChart.SecondaryAxis>

<Charts:NumericalAxis LabelFormat="C" />

</Charts:SfChart.SecondaryAxis>

<Charts:ColumnSeries ItemsSource="{Binding PointsSource, ElementName=ctrl}" XBindingPath="Date" YBindingPath="Amount">

<Charts:ColumnSeries.AdornmentsInfo>       

<Charts:ChartAdornmentInfo

VerticalAlignment="Top" HorizontalAlignment="Center"

ShowLabel="True" SegmentLabelFormat="#" 

LabelTemplate="{StaticResource labelTemplate}"   

AdornmentsPosition="Top"/>

</Charts:ColumnSeries.AdornmentsInfo>   

</Charts:ColumnSeries>

</Charts:SfChart>

 

 

I've tried to use PlotOffset property of NumericalAxis, but it takes effect for both sides - top and bottom. I need offset only from top side.

 

The questions are:

How to use axis auto interval feature with taking into account labels size?

How to avoid intersection of labels? (scr.png in attachment)

scr_7cff83a4.zip

[Karthikeyan V]

Hi Alexy,

Thanks for using Syncfusion products.

Query 1: Adornments label not shown

We have analyzed the reported query. You can achieve your requirement by override the ApplyRangepadding method in NumericAxis by using Custom NumericalAxis. Please find the code snippet below.

Code Snippet [C#]:

public class NumericalAxisExt: NumericalAxis

    {      

        protected override DoubleRange ApplyRangePadding(DoubleRange range, double interval)

        {

            if (Minimum != null && Maximum != null)

            {

                return range;

            }

            if (StartRangeFromZero && range.Start > 0)

                range = new DoubleRange(0, range.End);

             range = new DoubleRange(range.Start,range.End+interval);

            return base.ApplyRangePadding(range, interval);

        }

    }

We have created the sample based on this and you can find the sample in the following location.

Also We would like to inform you that you can achieve your requirement by using Minimum and Maximum value in Numerical Axis. Please find the code snippet for this.

Code Snippet[Xaml]:

<Charts:NumericalAxis Minimum="0" Maximum="80000" />

Query 2: Adornment labels intersect

We have already created the feature report for this. We will be implemented in any of our upcoming release.

If you would track the status of this feature, please create a Direct Trac incident for this with the below link. So that we will be able to provide you the status for this requested feature.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know, if you have any concerns.

Regards,

Karthikeyan V.

AdornmentSampleWinRT_262319de.zip

[Arumugam]

How can I take start and end range value of CategoryAxis?

ex:

For NumericAxis/DateTimeAxis I have a property called Minimum/Maximum, to get a data.

Similarly is there any property for CategoryAxis.

Regards,
Arumugam

[Sumathi Jayaraj]

Hi Alexy,

We are able to get the minimum and maximum of all chart axis types in ActualRangeChanged event as specified in the below code sample. Also we are able to set the minimum and maximum values of axis by setting VisibleMaximum and VisibleMinimum in that event.

Code example[C#]:

private void CategoryAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e)

{

    // To get the minimum and maximum of the category axis.

    axisMinimum = (double)e.ActualMinimum;

    axisMaximum = (double)e.ActualMaximum;

    // To set the minimum and maximum of the category axis.

    e.VisibleMinimum = 0;

    e.VisibleMaximum = 4;
}

We have prepared a sample and it can be downloaded from the following location.

Sample: MinMaxSample

Regards,
Sumathi J

[Arumugam]

Thanks Sumathi

I am having some calculated datapoints, that i need to append on Category Axis.

I will able to get the Current Visible Range using VisibleRange Property 'Start' and 'End', but I cannot set the value using the same as it setter property is Internal.

Is there anyway to append the range to the Axis. Instead of Actual Range Changed Event.

Note: I need to append the data on button Click.

Thanks in Advance.

[Sumathi Jayaraj]

Hi Arumugam,

Thanks for the update.

We are able to set the minimum and maximum to the category axis as specified in the below code sample.

Code example[C#]:

private void Button_Click(object sender, RoutedEventArgs e)

{

    DoubleRange actualRange = (DoubleRange)(primaryAxis.GetType().GetProperty("ActualRange", BindingFlags.Instance |

                    BindingFlags.NonPublic |

                    BindingFlags.Public).GetValue(primaryAxis));

    primaryAxis.ZoomPosition = (axisMinimum - actualRange.Start) / actualRange.Delta;

    primaryAxis.ZoomFactor = (axisMaximum - axisMinimum) / actualRange.Delta;
}

Regards,
Sumathi J