How to change Chart Series color

Thread is closed for posting
2 posts, 0 answers
  1. Shailesh
    Shailesh avatar
    7 posts
    Member since:
    Feb 2012

    Posted 25 Apr 2012 Link to this post

    Hi,
         I am using Rad char. I want to change color of my graph bars. How should i do that. Anybody please help me.




    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GraphicUC_Dbl.ascx.cs"
        Inherits="Medimmune.UserControls.GraphicsUC_Dbl" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
    <script src="~/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.jqplot.js" type="text/javascript"></script>
    <script src="~/Scripts/jqplot.barRenderer.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jqplot.pointLabels.min.js" type="text/javascript"></script>
    <%--<link href="~/CSS/jplot.min.css" rel="stylesheet" type="text/css" />--%>
    <style type="text/css">
        table, th, td
        {
            border: 0px solid black !important; /* width: 1021px;*/
        }
        
       /* .RadChart
        {
            width: 100% !important;
            overflow: auto;
            background-color :Black;
        }
        .RadChart img
        {
            width: 1099px !important;
            overflow: auto;
            height:490px;
            background-color :Black;
        }*/
    </style>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <table class="content">
        <tr>
            <td class="graph-top" style="width: 100%">
                Select Date:&nbsp;<telerik:RadComboBox ID="radDdlMonthYear" runat="server" Width="120"
                    OnSelectedIndexChanged="ddlYearMonth_SelectedIndexChanged" AutoPostBack="True"
                    Skin="Office2010Black">
                </telerik:RadComboBox>
                &nbsp; Sort Order :&nbsp;<telerik:RadComboBox ID="radDdlSortOrder" runat="server"
                    OnSelectedIndexChanged="radddlSortOrder_SelectedIndexChanged" Width="120" AutoPostBack="True"
                    Skin="Office2010Black">
                    <Items>
                        <telerik:RadComboBoxItem Text="Default" />
                        <telerik:RadComboBoxItem Text="Best to worst" />
                        <telerik:RadComboBoxItem Text="Worst to best" />
                    </Items>
                </telerik:RadComboBox>
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td>
                <%--style="width :100%"--%>
                <telerik:RadChart ID="rcPatientEnrollmentDouble" SkinsOverrideStyles="false" runat="server" DefaultType ="Bar"
                    PlotArea-Appearance-FillStyle-FillSettings-GradientMode="Center" PlotArea-Appearance-FillStyle-MainColor="White"
                    PlotArea-Appearance-FillStyle-SecondColor="White" PlotArea-Appearance-FillStyle-FillType="Gradient" PlotArea-Appearance-Dimensions-Width ="1000px"
                    PlotArea-YAxis-Appearance-Visible="true" Width="1200px" Height="500px" Skin="Sunset"
                    ChartTitle-Visible="false">
                    <Appearance >
                        <FillStyle MainColor="#D8E6F9">
                        </FillStyle>
                        <Border Color="203, 189, 169" />
                    </Appearance>
                    <Series>
                        <telerik:ChartSeries Name="Series 1" Appearance-LabelAppearance-LabelLocation="Inside"
                            Appearance-LabelAppearance-RotationAngle="90">
                            <Appearance >
                                <FillStyle FillType="ComplexGradient" >
                                    <FillSettings>
                                        <ComplexGradient>
                                            <telerik:GradientElement Color="222, 202, 152" />
                                            <telerik:GradientElement Color="211, 185, 123" Position="0.5" />
                                            <telerik:GradientElement Color="183, 154, 84" Position="1" />
                                        </ComplexGradient>
                                    </FillSettings>
                                </FillStyle>
                                <TextAppearance TextProperties-Color="136, 124, 111">
                                </TextAppearance>
                                <Border Color="187, 149, 58" />
                            </Appearance>
                        </telerik:ChartSeries>
                        <telerik:ChartSeries Name="Series 2" Appearance-LabelAppearance-LabelLocation="Inside"
                            Appearance-LabelAppearance-RotationAngle="90">
                            <Appearance >
                                <FillStyle FillType="ComplexGradient">
                                    <FillSettings>
                                        <ComplexGradient >
                                            <telerik:GradientElement Color="172, 208, 217" />
                                            <telerik:GradientElement Color="149, 193, 204" Position="0.5" />
                                            <telerik:GradientElement Color="114, 162, 175" Position="1" />
                                        </ComplexGradient>
                                    </FillSettings>
                                </FillStyle>
                                <TextAppearance TextProperties-Color="136, 124, 111">
                                </TextAppearance>
                                <Border Color="129, 180, 193" />
                            </Appearance>
                        </telerik:ChartSeries>
                    </Series>
                    <Legend>
                        <Appearance Position-AlignedPosition="TopRight" Dimensions-Margins ="5%,2%,1px,1px">
                            <ItemTextAppearance TextProperties-Color="39, 37, 34">
                            </ItemTextAppearance>
                            <ItemMarkerAppearance Figure="Square">
                            </ItemMarkerAppearance>
                            <FillStyle MainColor="221, 213, 199">
                            </FillStyle>
                            <Border Color="189, 175, 154" />
                        </Appearance>
                    </Legend>
                    <PlotArea Appearance-Dimensions-Paddings ="1px,1px,1px,1px" Appearance-Dimensions-Margins ="50px,120px,50px,50px" >
                        <DataTable>
                            <Appearance RenderType="PlotAreaRelative" TextHorizontalAlign="Center" TextVerticalAlign="Middle">
                            </Appearance>
                        </DataTable>
                        <XAxis Appearance-CustomFormat="0" AutoScale="false" Appearance-LabelAppearance-RotationAngle="-45"
                            LayoutMode="Inside">
                            <Appearance Color="" MajorTick-Color="203, 189, 169">
                                <MajorGridLines Color="Transparent" PenStyle="Solid" />
                                <TextAppearance TextProperties-Color="142, 130, 117">
                                </TextAppearance>
                            </Appearance>
                            <AxisLabel>
                                <TextBlock>
                                    <Appearance TextProperties-Color="142, 130, 117">
                                    </Appearance>
                                </TextBlock>
                            </AxisLabel>
                            <Items>
                                <telerik:ChartAxisItem>
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="1">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="2">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="3">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="4">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="5">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="6">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="7">
                                </telerik:ChartAxisItem>
                            </Items>
                        </XAxis>
                        <YAxis >
                            <Appearance Color="202, 200, 171" MajorTick-Color="203, 189, 169" MinorTick-Color="Transparent">
                                <MajorGridLines Color="AliceBlue" PenStyle="Solid" Visible ="true" />
                                <MinorGridLines Visible="false" />
                                <%--<MinorGridLines Color="Black"  PenStyle="Solid" />--%>
                                <TextAppearance TextProperties-Color="142, 130, 117">
                                </TextAppearance>
                            </Appearance>
                            <AxisLabel>
                                <TextBlock>
                                    <Appearance TextProperties-Color="142, 130, 117">
                                    </Appearance>
                                </TextBlock>
                            </AxisLabel>
                        </YAxis>
                        <Appearance>
                            <FillStyle FillType="Solid" MainColor="White">
                            </FillStyle>
                            <Border Color="203, 189, 169" />
                        </Appearance>
                    </PlotArea>
                    <ChartTitle Visible="False">
                        <Appearance Visible="False">
                            <FillStyle MainColor="Transparent">
                            </FillStyle>
                        </Appearance>
                        <TextBlock>
                            <Appearance TextProperties-Color="164, 58, 0" TextProperties-Font="Arial, 18pt">
                            </Appearance>
                        </TextBlock>
                    </ChartTitle>
                </telerik:RadChart>
            </td>
        </tr>
    </table>
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 26 Apr 2012 Link to this post

    Shailesh:

    You can reference the How Do I Assign Individual Colors to Bars? documentation page for insights on setting the color of the bars in the Chart.

    The color is assigned using the following property setting:

    foreach (ChartSeriesItem item in RadChart1.Series[0].Items)
    {
        item.Appearance.FillStyle.MainColor = barColors[i++];
    }


    Hope this helps!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top