Legend Colors do not match chart colors

Thread is closed for posting
2 posts, 0 answers
  1. Tad
    Tad avatar
    15 posts
    Member since:
    Jul 2007

    Posted 01 Nov 2010 Link to this post

    I'm trying to use a custom color pallette with stacked bar charts and can't seem to get the legend colors to match the chart.  I can't find any other threads related to this issue.

    Test.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="BorrowSmartReporting.test" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Panel ID="TestArea" runat="server" />
        </div>
        </form>
    </body>
    </html>


    Test.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Drawing;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using Telerik.Web.UI;
    using Telerik.Charting;
      
    namespace BorrowSmartReporting
    {
        public partial class test : System.Web.UI.Page
        {
            public System.Drawing.Color[] ChartColors = new System.Drawing.Color[13]
            {
                System.Drawing.Color.Black,        //Total Liabilities
                System.Drawing.Color.DarkOrange,   //Spent
                System.Drawing.Color.YellowGreen,  //Saved
                System.Drawing.Color.LightBlue,
                System.Drawing.Color.BurlyWood,
                System.Drawing.Color.DarkKhaki,
                System.Drawing.Color.DarkSeaGreen,
                System.Drawing.Color.Goldenrod,
                System.Drawing.Color.LightSteelBlue,
                System.Drawing.Color.LightSalmon,
                System.Drawing.Color.Silver,
                System.Drawing.Color.Thistle,
                System.Drawing.Color.Gold
            };
      
      
            protected void Page_Load(object sender, EventArgs e)
            {
                DataTable LiabilityTable = new DataTable();
                LiabilityTable.Columns.Add("Balance", System.Type.GetType("System.Double"));
                LiabilityTable.Columns.Add("LiabilityType", System.Type.GetType("System.String"));
      
                DataRow Test1 = LiabilityTable.NewRow();
                Test1["Balance"] = 21000;
                Test1["LiabilityType"] = "Auto";
                LiabilityTable.Rows.Add(Test1);
      
                DataRow Test2 = LiabilityTable.NewRow();
                Test2["Balance"] = 10000;
                Test2["LiabilityType"] = "Credit Card";
                LiabilityTable.Rows.Add(Test2);
      
                DataRow Test3 = LiabilityTable.NewRow();
                Test3["Balance"] = 210000;
                Test3["LiabilityType"] = "Mortgage";
                LiabilityTable.Rows.Add(Test3);
      
                DataView Liabilities = new DataView(LiabilityTable);
      
                RadChart CurrentLiabilitiesPageChart2 = new RadChart();
      
                double total = 0;
                for (int i = 0; i < Liabilities.Count; i++)
                {
                    ChartSeries stackedBarSeries = new ChartSeries();
                    stackedBarSeries.Type = ChartSeriesType.StackedBar;
      
                    double balance = 0;
                    double.TryParse(Liabilities[i]["Balance"].ToString(), out balance);
                    total += balance;
                    stackedBarSeries.AddItem(balance);
      
                    stackedBarSeries.Name = Liabilities[i]["LiabilityType"].ToString() + " (" + balance.ToString("C0") + ")";
                    stackedBarSeries.Items[0].Label.TextBlock.Visible = false;
                    stackedBarSeries.Items[0].Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Gradient;
                    stackedBarSeries.Items[0].Appearance.FillStyle.MainColor = ChartColors[i + 3];
      
                    CurrentLiabilitiesPageChart2.Series.Add(stackedBarSeries);
                }
      
                CurrentLiabilitiesPageChart2.ChartTitle.TextBlock.Text = "Balances";
                CurrentLiabilitiesPageChart2.Width = 400;
                CurrentLiabilitiesPageChart2.Height = 300;
                CurrentLiabilitiesPageChart2.Appearance.Border.Visible = false;
                CurrentLiabilitiesPageChart2.PlotArea.Appearance.Border.Visible = false;
                CurrentLiabilitiesPageChart2.Legend.Appearance.Border.Visible = false;
                CurrentLiabilitiesPageChart2.PlotArea.XAxis.Appearance.TextAppearance.Visible = false;
                CurrentLiabilitiesPageChart2.Legend.Appearance.ItemMarkerAppearance.Figure = "Rectange";
                CurrentLiabilitiesPageChart2.PlotArea.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
                CurrentLiabilitiesPageChart2.PlotArea.Appearance.FillStyle.MainColor = Color.White;
      
                CurrentLiabilitiesPageChart2.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = Color.Black;
                CurrentLiabilitiesPageChart2.PlotArea.YAxis.Appearance.CustomFormat = "C0";
                CurrentLiabilitiesPageChart2.Legend.Appearance.Location = Telerik.Charting.Styles.LabelLocation.OutsidePlotArea;
                CurrentLiabilitiesPageChart2.AutoLayout = true;
      
                TestArea.Controls.Add(CurrentLiabilitiesPageChart2);
            }
        }
    }

    Enclosed is the resulting Chart.

    Help?!

    Thanks,

    --Tad Richard

  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 04 Nov 2010 Link to this post

    Hi Tad,

    To be able to show same colors for Legend items Markers as for StackedBar series items you should create a Custom Palette and apply it for your Chart. Here is how you can achieve this:

    Color[] seriesColors = new[]  
          {  
             Color.Red,  
             Color.Yellow,  
             Color.Black,  
             Color.Blue,  
             Color.White,  
             Color.Green,  
          };
      
            Palette seriesPalette = new Palette("seriesPalette", seriesColors, true);
            CurrentLiabilitiesPageChart2.CustomPalettes.Add(seriesPalette);
            CurrentLiabilitiesPageChart2.SeriesPalette = "seriesPalette";
    Add those code snippet after the line where you create new instance of RadChart :
    RadChart CurrentLiabilitiesPageChart2 = new RadChart();


    This will ensure that the legend items match the ChartSeriesItems colors and you will not need to set the color for each individual ChartSeriesItem.

    Sincerely yours,
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top