Chart label's position was wrong

[linnet]

Hi, I try to use a RadChart with two series definition, one has a BarSeriesDefinition and the other one has a LineSeriesDefinition, please take a look into the attached image(bad.png), except "0%" the other label's position was wrong.
However, when I just try to change ItemSource the label's position is right. please take a look into the attached image(good.png).
This is my code:

SeriesMappingCollection seriesMappings = new SeriesMappingCollection();
SeriesMapping seriesMapping = new SeriesMapping();
seriesMapping.LegendLabel = "Amount";
seriesMapping.SeriesDefinition = new BarSeriesDefinition() { ItemStyle = analysisChart.Resources["BarStyle"] as Style };
seriesMapping.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.YValue, FieldName = "AMOUNT" });
seriesMapping.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.XCategory, FieldName = "YEAR_QUARTER" });
seriesMappings.Add(seriesMapping);
seriesMapping = new SeriesMapping();
seriesMapping.LegendLabel = "Growth Rate";
seriesMapping.SeriesDefinition = new LineSeriesDefinition() { AxisName = "GROWTH_RATE", ItemLabelFormat = "p0" };
seriesMapping.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.YValue, FieldName = "GROWTH_RATE" });
seriesMapping.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.XCategory, FieldName = "YEAR_QUARTER" });
seriesMappings.Add(seriesMapping);
analysisChart.Chart.SeriesMappings = seriesMappings;
analysisChart.Chart.DefaultView.ChartArea.AxisX = new AxisX();
analysisChart.Chart.DefaultView.ChartArea.AxisY = new AxisY()
{
    StripLinesVisibility = System.Windows.Visibility.Collapsed
};
analysisChart.Chart.DefaultView.ChartArea.AdditionalYAxes = new AxisYCollection();
analysisChart.Chart.DefaultView.ChartArea.AdditionalYAxes.Add(new AxisY()
{
    AxisName = "GROWTH_RATE"
    ,
    Title = " "
    ,
    PlotAreaAxisVisibility = System.Windows.Visibility.Collapsed
    ,
    DefaultLabelFormat = "p0"
    ,
    ExtendDirection = AxisExtendDirection.None
});
analysisChart.Chart.DefaultView.ChartArea.SmartLabelsEnabled = true;

Any idea?

Thank you for the support!

[Petar Marchev]

Hello Linnet,

Thank you for the attached snapshots and code.

Unfortunately I was not able to reproduce the behavior that you describe. I created a brand new Silverlight 5 project and used the code that you provided. I had to slightly modify some things in order to compile and run the code. I have attached it to this post so that you can test it. I have also attached a snapshot of the result when I get when I run the project. Let us know if you get different results.

The only suggestion I can make now is to disable the SmartLabels:

analysisChart.Chart.DefaultView.ChartArea.SmartLabelsEnabled = false;

If you need further assistance I will ask that you prepare a small project that we can run and that reproduces this behavior, and send us the code  of the project.

Greetings,
Petar Marchev
the Telerik team

[linnet]

Hello Petar Marchev,

Thank you for your response.

I'm sorry, I leaked something importent source code. but I reproduced it.
please take a look into the attached image(reproduced.png)
I forgot my Chart is contained in RadTransitionControl with Margin="0,106,0,8".
MainPage.xaml

<telerik:RadTransitionControl x:Name="ContentElement" Duration="00:00:00.800" Opacity="0.95" Margin="0,106,0,8">
    <telerik:RadTransitionControl.Transition>
        <effects:SlideAndZoomTransition />
    </telerik:RadTransitionControl.Transition>
</telerik:RadTransitionControl>

MainPage.cs

public MainPage()
{
    InitializeComponent();
    this.ContentElement.Content = new ChartView();
}

Initialize the chart and Binding data are in UserControl_Loaded event.

ChartView.xaml

<telerik:RadChart x:Name="analysisChart" />

ChartView.cs

public partial class ChartView : UserControl
{
    public ChartView()
    {
        InitializeComponent();
        // It's fine way.
        //Search();
    }

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
        // It's bad way. but sometimes can be fine.
        Search();
    }

    private void Search()
    {
        // When I review my source, I detected the Binding data is first.
        analysisChart.ItemsSource = this.GenerateItemsSource();

        SeriesMappingCollection seriesMappings = new SeriesMappingCollection();
        SeriesMapping seriesMapping = new SeriesMapping();
        seriesMapping.LegendLabel = "Amount";
        seriesMapping.SeriesDefinition = new BarSeriesDefinition(); // { ItemStyle = Resources["BarStyle"] as Style };
        seriesMapping.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.YValue, FieldName = "AMOUNT" });
        seriesMapping.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.XCategory, FieldName = "YEAR_QUARTER" });
        seriesMappings.Add(seriesMapping);
        seriesMapping = new SeriesMapping();
        seriesMapping.LegendLabel = "Growth Rate";
        seriesMapping.SeriesDefinition = new LineSeriesDefinition() { AxisName = "GROWTH_RATE", ItemLabelFormat = "p0" };
        seriesMapping.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.YValue, FieldName = "GROWTH_RATE" });
        seriesMapping.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.XCategory, FieldName = "YEAR_QUARTER" });
        seriesMappings.Add(seriesMapping);

        analysisChart.SeriesMappings = seriesMappings;
        analysisChart.DefaultView.ChartArea.AxisX = new AxisX();
        analysisChart.DefaultView.ChartArea.AxisY = new AxisY()
        {
            StripLinesVisibility = System.Windows.Visibility.Collapsed
        };
        analysisChart.DefaultView.ChartArea.AdditionalYAxes = new AxisYCollection();
        analysisChart.DefaultView.ChartArea.AdditionalYAxes.Add(new AxisY()
        {
            AxisName = "GROWTH_RATE",
            Title = " ",
            PlotAreaAxisVisibility = System.Windows.Visibility.Collapsed,
            DefaultLabelFormat = "p0",
            ExtendDirection = AxisExtendDirection.None
        });
        analysisChart.DefaultView.ChartLegendPosition = Telerik.Windows.Controls.Dock.Bottom;
        analysisChart.DefaultView.ChartLegend = new ChartLegend()
        {
            Header = string.Empty
            ,
            HorizontalAlignment = HorizontalAlignment.Center
            ,
            Padding = new Thickness(0, 0, 5, 0)
            ,
            BorderThickness = new Thickness(2)
        };
        analysisChart.DefaultView.ChartArea.SmartLabelsEnabled = true;
        // This was leaked.
        analysisChart.Rebind();
    }

    private List<Product> GenerateItemsSource()
    {
        var itemsSource = new List<Product>()
        {
            new Product(){ YEAR_QUARTER = "2005Q1", AMOUNT = 7355782263.0, GROWTH_RATE = 0.0},
            new Product(){ YEAR_QUARTER = "2006Q1", AMOUNT = 8442978860.0, GROWTH_RATE = 0.12846931412807066},
            new Product(){ YEAR_QUARTER = "2007Q1", AMOUNT = 10479835074.0, GROWTH_RATE = 0.19435956764752421},
            new Product(){ YEAR_QUARTER = "2008Q1", AMOUNT = 13391929676.0, GROWTH_RATE = 0.21745145564935536},
            new Product(){ YEAR_QUARTER = "2009Q1", AMOUNT = 15585168316.0, GROWTH_RATE = 0.14072601562784431},
            new Product(){ YEAR_QUARTER = "2010Q1", AMOUNT = 19255541629.0, GROWTH_RATE = 0.19061384021553305},

            //new Product(){ YEAR_QUARTER = "2005Q1", AMOUNT = 7000000000, GROWTH_RATE = 0},
            //new Product(){ YEAR_QUARTER = "2006Q1", AMOUNT = 8000000000, GROWTH_RATE = 130},
            //new Product(){ YEAR_QUARTER = "2007Q1", AMOUNT = 10000000000, GROWTH_RATE = 190},
            //new Product(){ YEAR_QUARTER = "2008Q1", AMOUNT = 13000000000, GROWTH_RATE = 220},
            //new Product(){ YEAR_QUARTER = "2009Q1", AMOUNT = 15000000000, GROWTH_RATE = 140},
            //new Product(){ YEAR_QUARTER = "2010Q1", AMOUNT = 19000000000, GROWTH_RATE = 190},
        };

        return itemsSource;
    }
}

public class Product
{
    public string YEAR_QUARTER { get; set; }
    public double AMOUNT { get; set; }
    //public int GROWTH_RATE { get; set; }
    public double GROWTH_RATE { get; set; }
}

Thank you for the support.

[Petar Marchev]

Hello Linnet,

Thank you for the attached code!

I was able to create a project with the code that you have provided. After some testing we managed to find the origins of this problem. While configuring the chart you are swapping the already existing AxisYCollection with a new AxisYCollection and this results in an invalid layout.

In general you do not need to create new controls (AxisX, AxisY, ChartLegend, AxisYCollection) in order for the chart to work. So instead of this code:

analysisChart.DefaultView.ChartArea.AxisY = new AxisY()
{
  StripLinesVisibility = System.Windows.Visibility.Collapsed
};

you can use this:

analysisChart.DefaultView.ChartArea.AxisY.StripLinesVisibility = System.Windows.Visibility.Collapsed;

And you can also remove this line:

analysisChart.DefaultView.ChartArea.AdditionalYAxes = new AxisYCollection();

This should fix the improper positioning of the labels.

Also you do not need to call the Rebind method. Instead you should first set the series mappings, add the additional Y axis and after this set the ItemsSource. 

On a side note I want to suggest you move your code to XAML. I understand that the code provided is not code from the actual project, but we believe that if you can move some of this code to XAML then you should consider this. I have attached a demo project based on the C# code that you provided, where the described incorrect positioning of the labels does not occur. Almost all of this C# code is translated into XAML. Please examine it and consider to apply the approach for your project.

Greetings,
Petar Marchev
the Telerik team