Color for custom legend items cannot be set

Thread is closed for posting
2 posts, 1 answers
  1. Masoud
    Masoud avatar
    61 posts
    Member since:
    Aug 2011

    Posted 14 May 2013 Link to this post

    Hi there,

    I have an page (code at the end of posting) with a RadChart. The RadChart is used to show the progress of a project as a Gantt diagram.  The client organizes thier projects in the following manner
    - a project is split into milestones
    - a milestone is split into phases

    Only the phases should be displayed on the diagram and not the milestones.  The phases should be colored according to the milestone.  The colors of the milestones should be shown as legend.  Please see the attached image.  

    I have the following issues:
    I don't seem to get the legend working properly.  I use PreRender of the RadChart to reset the legend and create its elements manually. The colors shown however don't correspnd with the ones assigned.  

    Following is the code.

    Thank you for your help!

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Projektplan.aspx.cs" Inherits="Test.Pages.Projektplan" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <head runat="server">
        <form id="form1" runat="server">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                        <asp:scriptreference assembly="Telerik.Web.UI" name="Telerik.Web.UI.Common.Core.js"></asp:scriptreference>
                        <asp:scriptreference assembly="Telerik.Web.UI" name="Telerik.Web.UI.Common.jQuery.js"></asp:scriptreference>
                        <asp:scriptreference assembly="Telerik.Web.UI" name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:scriptreference>
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
                <telerik:RadChart ID="ProjektPlan" runat="server" SeriesOrientation="Horizontal" OnPreRender="ProjektPlan_OnPreRender" DefaultType="Gantt" />

    using System;
    using System.Drawing;
    using Telerik.Charting;
    using Telerik.Charting.Styles;
    using Telerik.Web.UI;
    namespace Test.Pages
        public partial class Projektplan : System.Web.UI.Page
            readonly Color _kickoffcolor = Color.Coral;
            readonly Color _longColor = Color.Blue;
            readonly Color _pflichtenheftColor = Color.CornflowerBlue;
            readonly Color _shortColor = Color.Cornsilk;
            readonly Color _entscheidungsvorlageColor = Color.Crimson;
            readonly Color _abschlussColor = Color.Cyan;
            protected void Page_Load(object sender, EventArgs e)
                if (Page.IsPostBack)
                ProjektPlan.Height = 600;
                ProjektPlan.Width = 800;
                ProjektPlan.PlotArea.YAxis.AutoScale = false;
                ProjektPlan.PlotArea.YAxis.AxisMode = ChartYAxisMode.Extended;
                ProjektPlan.PlotArea.YAxis.Appearance.ValueFormat = ChartValueFormat.ShortDate;
                ProjektPlan.PlotArea.YAxis.Appearance.CustomFormat = "MM.yyyy";
                ProjektPlan.PlotArea.YAxis.Appearance.LabelAppearance.RotationAngle = 45;
                ProjektPlan.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;
                ProjektPlan.PlotArea.XAxis.Appearance.MajorGridLines.Visible = false;
                double start = new DateTime(2013, 5, 17).ToOADate();
                double ende = new DateTime(2014, 8, 17).ToOADate();
                ProjektPlan.PlotArea.YAxis.AddRange(start, ende, 30);
                ChartSeries series0 = new ChartSeries { Name = "series 1", Type = ChartSeriesType.Gantt };
                series0.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.Nothing;
                series0.Appearance.FillStyle.MainColor = Color.Blue;
                ChartSeriesItem kickoffSeriesItem = new ChartSeriesItem
                    Name = "Series0Item0",
                    YValue = new DateTime(2013, 5, 17).ToOADate(),
                    YValue2 = new DateTime(2013, 6, 17).ToOADate()
                kickoffSeriesItem.Label.TextBlock.Text = "Kickoff";
                kickoffSeriesItem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;
                kickoffSeriesItem.Appearance.FillStyle.MainColor = _kickoffcolor;
                ChartSeriesItem longSeriesItem = new ChartSeriesItem
                    Name = "Series0Item1",
                    YValue = new DateTime(2013, 7, 20).ToOADate(),
                    YValue2 = new DateTime(2013, 8, 14).ToOADate()
                longSeriesItem.Appearance.FillStyle.MainColor = _longColor;
                longSeriesItem.Label.TextBlock.Text = "Longlist";
                kickoffSeriesItem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;
                ChartSeriesItem shortSeriesItem = new ChartSeriesItem
                    Name = "Series1Item0",
                    YValue = new DateTime(2013, 9, 30).ToOADate(),
                    YValue2 = new DateTime(2013, 11, 17).ToOADate()
                shortSeriesItem.Appearance.FillStyle.MainColor = _shortColor;
                shortSeriesItem.Label.TextBlock.Text = "Shortlist";
                kickoffSeriesItem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;
                ChartSeriesItem abschlussSeriesItem = new ChartSeriesItem
                    Name = "Series1Item1",
                    YValue = new DateTime(2013, 12, 15).ToOADate(),
                    YValue2 = new DateTime(2014, 4, 14).ToOADate()
                abschlussSeriesItem.Appearance.FillStyle.MainColor = _abschlussColor;
                abschlussSeriesItem.Label.TextBlock.Text = "Abschluß";
                kickoffSeriesItem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;
            protected void ProjektPlan_OnPreRender(object sender, EventArgs e)
                RadChart chart = (RadChart) sender;
                LabelItem kickoffLegendItem = new LabelItem("Kickoff");
                kickoffLegendItem.Appearance.FillStyle.MainColor = _kickoffcolor;
                LabelItem longLegendItem = new LabelItem("Longlist");
                longLegendItem.Appearance.FillStyle.MainColor = _longColor;
                LabelItem pflichtenheftLegendItem = new LabelItem("Pflichtenheft");
                longLegendItem.Appearance.FillStyle.MainColor = _pflichtenheftColor;
                LabelItem shortLegendItem = new LabelItem("Shortlist");
                shortLegendItem.Appearance.FillStyle.MainColor = _shortColor;
                LabelItem entscheidungsvorlageLegendItem = new LabelItem("Entscheidungsvorlage");
                shortLegendItem.Appearance.FillStyle.MainColor = _entscheidungsvorlageColor;
                LabelItem abschlussLegendItem = new LabelItem("Abschluß");
                abschlussLegendItem.Appearance.FillStyle.MainColor = _abschlussColor;

  2. Answer
    Petar Kirov
    Petar Kirov avatar
    425 posts

    Posted 17 May 2013 Link to this post

    Hi Klaus,

    The problem was that (probably because of copy pasting) you were creating item B and after that setting the color of item A:
    LabelItem longLegendItem = new LabelItem("Longlist");
    longLegendItem.Appearance.FillStyle.MainColor = _longColor;
    LabelItem pflichtenheftLegendItem = new LabelItem("Pflichtenheft");
    longLegendItem.Appearance.FillStyle.MainColor = _pflichtenheftColor;
    LabelItem shortLegendItem = new LabelItem("Shortlist");
    shortLegendItem.Appearance.FillStyle.MainColor = _shortColor;
    LabelItem entscheidungsvorlageLegendItem = new LabelItem("Entscheidungsvorlage");
    shortLegendItem.Appearance.FillStyle.MainColor = _entscheidungsvorlageColor;

    After fixing this you should be able to see the items colors as expected (see attached screenshot).
    Petar Kirov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. DevCraft R3 2016 release webinar banner
Back to Top