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

How to change Chart Series color

1 Answer 283 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Shailesh
Top achievements
Rank 1
Shailesh asked on 25 Apr 2012, 01:54 PM
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>

1 Answer, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 26 Apr 2012, 10:11 PM
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!
Tags
Chart (Obsolete)
Asked by
Shailesh
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Share this question
or