This is a migrated thread and some comments may be shown as answers.

Legend Colors do not match chart colors

1 Answer 178 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Tad asked on 01 Nov 2010, 08:20 PM
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.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="BorrowSmartReporting.test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<head runat="server">
    <form id="form1" runat="server">
        <asp:Panel ID="TestArea" runat="server" />


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
        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";
            DataRow Test2 = LiabilityTable.NewRow();
            Test2["Balance"] = 10000;
            Test2["LiabilityType"] = "Credit Card";
            DataRow Test3 = LiabilityTable.NewRow();
            Test3["Balance"] = 210000;
            Test3["LiabilityType"] = "Mortgage";
            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.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.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;

Enclosed is the resulting Chart.



--Tad Richard

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 04 Nov 2010, 01:48 PM
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[]  
        Palette seriesPalette = new Palette("seriesPalette", seriesColors, true);
        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,
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
Chart (Obsolete)
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question