Changing Line Colors

Thread is closed for posting
2 posts, 0 answers
  1. Steve
    Steve avatar
    9 posts
    Member since:
    Jun 2009

    Posted 23 Aug 2012 Link to this post

    I am decoratively creating a Spline chart and need to change the line colors:

    <telerik:RadChart
               ID="RadChartModelingZones"
               runat="server"
               DataSourceID="SqlDataSourceModelingZones"
               DefaultType="Spline"
               Skin="Gray"
               ChartTitle-TextBlock-Text="Merit">
               <Appearance Corners="Round, Round, Round, Round, 7">
                   <FillStyle FillType="ComplexGradient">
                       <FillSettings GradientMode="Horizontal">
                           <ComplexGradient>
                               <telerik:GradientElement Color="236, 236, 236" />
                               <telerik:GradientElement Color="248, 248, 248" Position="0.5" />
                               <telerik:GradientElement Color="236, 236, 236" Position="1" />
                           </ComplexGradient>
                       </FillSettings>
                   </FillStyle>
                   <Border Color="130, 130, 130" />
               </Appearance>
               <Series>
                   <telerik:ChartSeries Name="Series 1" Type="Spline">
                       <Appearance>
                           <FillStyle MainColor="164, 164, 164">
                           </FillStyle>
                           <TextAppearance TextProperties-Color="51, 51, 51">
                           </TextAppearance>
                       </Appearance>
                   </telerik:ChartSeries>
                   <telerik:ChartSeries Name="Series 2" Type="Spline">
                       <Appearance>
                           <FillStyle MainColor="108, 108, 108">
                           </FillStyle>
                           <TextAppearance TextProperties-Color="51, 51, 51">
                           </TextAppearance>
                       </Appearance>
                   </telerik:ChartSeries>
               </Series>
               <Legend>
                   <Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px"
                               Dimensions-Paddings="2px, 8px, 6px, 3px" Position-AlignedPosition="TopRight">
                       <ItemMarkerAppearance Figure="Square">
                           <Border Width="0" />
                       </ItemMarkerAppearance>
                       <FillStyle MainColor="">
                       </FillStyle>
                       <Border Width="0" />
                   </Appearance>
               </Legend>
               <PlotArea>
                   <XAxis>
                       <Appearance Color="182, 182, 182" MajorTick-Color="216, 216, 216">
                           <MajorGridLines Color="216, 216, 216" PenStyle="Solid" />
                           <TextAppearance TextProperties-Color="51, 51, 51">
                           </TextAppearance>
                       </Appearance>
                       <AxisLabel>
                           <TextBlock>
                               <Appearance TextProperties-Color="51, 51, 51">
                               </Appearance>
                           </TextBlock>
                       </AxisLabel>
                   </XAxis>
                   <YAxis>
                       <Appearance Color="182, 182, 182" MajorTick-Color="216, 216, 216"
                                   MinorTick-Color="223, 223, 223">
                           <MajorGridLines Color="216, 216, 216" />
                           <MinorGridLines Color="223, 223, 223" />
                           <TextAppearance TextProperties-Color="51, 51, 51">
                           </TextAppearance>
                       </Appearance>
                       <AxisLabel>
                           <TextBlock>
                               <Appearance TextProperties-Color="51, 51, 51">
                               </Appearance>
                           </TextBlock>
                       </AxisLabel>
                   </YAxis>
                   <Appearance>
                       <FillStyle FillType="Solid" MainColor="White">
                       </FillStyle>
                       <Border Color="182, 182, 182" />
                   </Appearance>
               </PlotArea>
               <ChartTitle>
                   <Appearance>
                       <FillStyle MainColor="">
                       </FillStyle>
                   </Appearance>
                   <TextBlock>
                       <Appearance TextProperties-Color="102, 102, 102"
                                   TextProperties-Font="Arial, 18pt">
                       </Appearance>
                   </TextBlock>
               </ChartTitle>
           </telerik:RadChart>
     
    Here is the DataSource:

    <asp:SqlDataSource
        ID="SqlDataSourceModelingZones"
        runat="server"
        ConnectionString="<%$ ConnectionStrings:...%>"
        SelectCommand="GetMeritModelingZones"
        SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:ControlParameter
                ControlID="RadSlider"
                DefaultValue="0.00"
                Name="Merit"
                PropertyName="SelectedValue"
                Type="Decimal" />
        </SelectParameters>
    </asp:SqlDataSource>

    I would prefer to keep all markup in aspx as opposed to changing the line colors in the code behind if that is possible.

    The attached shows the chart w/ the default colors and cannot seem to change.

    Thanks,

    Steve

  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 28 Aug 2012 Link to this post

    Hi Steve,

    You can create a predefined palette of colors and set them to RadChart like this:

    <telerik:RadChart ID="RadChart1" runat="server" SeriesPalette="MyPalette">
                <CustomPalettes>
                    <telerik:Palette Name="MyPalette">
                        <Items>
                            <telerik:PaletteItem MainColor="Red" SecondColor="Green">
                            </telerik:PaletteItem>
                            <telerik:PaletteItem MainColor="Orange" SecondColor="Blue">
                            </telerik:PaletteItem>
                            .......
                        </Items>
                    </telerik:Palette>
                </CustomPalettes>

    I hope this helps.

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