Legend Label in Bar-Chart

2 posts, 1 answers
  1. Parvinder Singh
    Parvinder Singh avatar
    10 posts
    Member since:
    Mar 2010

    Posted 28 Oct 2010 Link to this post

    Hi, 

    I have similar data as show below,
    I m trying to show each fruit bar with different color & Fruit names "Name field" at  LegendLabel

    But its showing all Bars with blue color & at Legend Label : Series 0. So how to show it.
    ObservableCollection<ChartData> chartData = new ObservableCollection<ChartData>();
    chartData.Clear();
    chartData.Add(new ChartData { Name = Orange, Val = 10 });
    chartData.Add(new ChartData { Name =  Mango, Val = 15 });
    chartData.Add(new ChartData { Name =  Pineapple, Val = 20 });
    chartData.Add(new ChartData { Name =  Appleberry, Val = 8 });
    chartData.Add(new ChartData { Name =  Banana, Val = 14 });
    chartData.Add(new ChartData { Name =  Ciku, Val = 7 });
    radChart.ItemsSource = chartData;
    radChart.DefaultView.ChartLegend.Header = "Fruits";
    SeriesMapping seriesMapping = new SeriesMapping()
    {
    SeriesDefinition = new BarSeriesDefinition()
    };
    ObservableCollection<ChartData> chartData = new ObservableCollection<ChartData>();
    chartData.Clear();
    chartData.Add(new ChartData { Name = Orange, Val = 10 });
    chartData.Add(new ChartData { Name =  Mango, Val = 15 });
    chartData.Add(new ChartData { Name =  Pineapple, Val = 20 });
    chartData.Add(new ChartData { Name =  Appleberry, Val = 8 });
    chartData.Add(new ChartData { Name =  Banana, Val = 14 });
    chartData.Add(new ChartData { Name =  Ciku, Val = 7 });
    radChart.ItemsSource = chartData;
    radChart.DefaultView.ChartLegend.Header = "Fruits";
    SeriesMapping seriesMapping = new SeriesMapping()
    {
    SeriesDefinition = new BarSeriesDefinition()
    };
    seriesMapping.ItemMappings.Add(new ItemMapping()
    {
    DataPointMember = DataPointMember.LegendLabel,
    FieldName = "Name"
    });
    seriesMapping.ItemMappings.Add(new ItemMapping()
    {
    DataPointMember = DataPointMember.YValue,
    FieldName = "Val"
    });
    radChart.SeriesMappings.Clear();
    radChart.SeriesMappings.Add(seriesMapping);
    ObservableCollection<ChartData> chartData = new ObservableCollection<ChartData>();
    chartData.Clear();
    chartData.Add(new ChartData { Name = Orange, Val = 10 });
    chartData.Add(new ChartData { Name =  Mango, Val = 15 });
    chartData.Add(new ChartData { Name =  Pineapple, Val = 20 });
    chartData.Add(new ChartData { Name =  Appleberry, Val = 8 });
    chartData.Add(new ChartData { Name =  Banana, Val = 14 });
    chartData.Add(new ChartData { Name =  Ciku, Val = 7 });
    radChart.ItemsSource = chartData;
    radChart.DefaultView.ChartLegend.Header = "Fruits";
    SeriesMapping seriesMapping = new SeriesMapping()
    {
        SeriesDefinition = new BarSeriesDefinition()
    };
    seriesMapping.ItemMappings.Add(new ItemMapping()
    {
        DataPointMember = DataPointMember.LegendLabel,
        FieldName = "Name"
    });
    seriesMapping.ItemMappings.Add(new ItemMapping()
    {
        DataPointMember = DataPointMember.YValue,
        FieldName = "Val"
    });
    radChart.SeriesMappings.Clear();
    radChart.SeriesMappings.Add(seriesMapping);
    Thanks!
  2. Answer
    Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 02 Nov 2010 Link to this post

    Hi Parvinder,

    To be able to show each Bar's LegendLabel in Legend and with different color you should set Legend Display Mode property to DataPointLabel. This is described in our help topic - http://www.telerik.com/help/silverlight/radchart-features-chart-legend.html (Legend Display Modes).
    Another important thing you should change in your code is the way you set series definition to BarSeriesDefinition. To be able to set LegendDisplayMode to DataPointLabel you should do it through your SeriesDefinition. Create an instance of BarSeriesDefinition class and set it's LegendDisplayMode as mentioned. Here is how your code should look:

    public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                this.radChart.ItemsSource = TradeData.GetWeeklyData();
                radChart.DefaultView.ChartLegend.Header = "Fruits";
                BarSeriesDefinition bar = new BarSeriesDefinition();
                SeriesMapping seriesMapping = new SeriesMapping()
                {
                    SeriesDefinition = bar
                };
                seriesMapping.ItemMappings.Add(new ItemMapping()
                {
                    DataPointMember = DataPointMember.LegendLabel,
                    FieldName = "Name"
                });
                seriesMapping.ItemMappings.Add(new ItemMapping()
                {
                    DataPointMember = DataPointMember.YValue,
                    FieldName = "YValue"
                });
                radChart.SeriesMappings.Add(seriesMapping);
                radChart.DefaultSeriesDefinition = bar;
                bar.LegendDisplayMode = LegendDisplayMode.DataPointLabel;
            }
      
            public class TradeData
            {
      
                public string Name
                {
                    get;
                    set;
                }
      
                public double YValue
                {
                    get;
                    set;
                }
      
                public static ObservableCollection<TradeData> GetWeeklyData()
                {
                    ObservableCollection<TradeData> tradeData = new ObservableCollection<TradeData>();
             tradeData.Add(new TradeData { Name = "Orange", YValue = 10 });
             tradeData.Add(new TradeData { Name = "Mango", YValue = 15 });
             tradeData.Add(new TradeData { Name = "Pineapple", YValue = 20 });
             tradeData.Add(new TradeData { Name = "Appleberry", YValue = 8 });
             tradeData.Add(new TradeData { Name = "Banana", YValue = 14 });
             tradeData.Add(new TradeData { Name = "Ciku", YValue = 7 });
             return tradeData;
                }
            }
        }

    I hope this information gets you started properly.

    Regards,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top