Existing RadChart Skins - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Existing RadChart Skins

  • Existing RadChart Skins
  • Hey,

    I wanted to create a own skin for a RadChart, every tutorial tells me I should start with an existing telerik skin for this control.
    But my problem is I can't find any existing skin for the radcharts.
    For other controls I found files like:
    treeview.black.css

    Isn't there any file like that for the charts?
  • Hi Thomas Luck,

    There are some differences between RadChart and most of the other controls when it comes to skinning. Since RadChart is just an image which is generated on the server, there is no CSS, but every skin is a set of predefined appearance properties, which are applied to the chart.

    However I suggest you to use the following approach
    1. modify some of the existing skin's properties and
    2. apply the generated .xml file using the ApplyTo method as shown here.
    RadChart1.Appearance.FillStyle.MainColor = System.Drawing.Color.Red; 
     
    ChartSkin myCustomSkin = new ChartSkin(); 
    myCustomSkin.CreateFromChart(RadChart1.Chart, "CustomSkin"); 
    myCustomSkin.XmlSource.Save(Server.MapPath("~/MyCustomSkin.xml")); 
     
    ChartSkin myCustomSkin1 = new ChartSkin("CustomSkin"); 
    myCustomSkin1.XmlSource.Load(Server.MapPath("~/MyCustomSkin.xml")); 
    myCustomSkin1.ApplyTo(RadChart2.Chart);
    I hope this helps. Best wishes,
    Sia
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  • Ok, I took one of you xml's and modified it.
    It works all fine, excluding chaning the color of bars,lines,etc.
    I changed the MainColor of all Series to red, after that wasn't working I also changed the Gradients to red, but nothing happend.
    The series do still have the color of the default skin.

    <ChartSeries>
          <Appearance>
            <Border Color="214, 214, 214" />
            <TextAppearance>
              <TextProperties Color="140, 140, 140" />
            </TextAppearance>
            <FillStyle MainColor="Red" FillType="ComplexGradient">
              <FillSettings>
                <ComplexGradient>
                  <GradientElement Color="Red" />
                  <GradientElement Color="Red" Position="0.5" />
                  <GradientElement Color="Red" Position="1" />
                </ComplexGradient>
              </FillSettings>
            </FillStyle>
            <LineSeriesAppearance Color="230, 234, 237" />
          </Appearance>
        </ChartSeries>

    Why isn't that working?
  • Hi Thomas Luck,

    Please try with the following settings:
    <Appearance>
        <FillStyle MainColor="Red" FillType="Solid" />
    </Appearance>

    All the best,
    Sia
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  • Hey Sia,

    No, it has no affect, it seems that every custom skins is using the Default skin, but just vor the series.
    The title, xaxis and yaxis I can change.
    Even if I copy one of your skins into a new file and load it, the skin is not working.

  • Ok, I made it, the problem was that I assigned the Skin to earlie.
    Now another question, the customskins are working for everything fine, except the pie chart.
    If I make in the code, it works with assigning the item a color.
    Can I add to the xml also an item tag into a serie or something like that?
    Or do I have to change the pie color in the code?
  • Hi Thomas Luck,

    In order to change the color of a pie slice, you need to set its appearance /not the chart series's one/:
    <telerik:ChartSeries Type="Pie">
        <Items>
            <telerik:ChartSeriesItem YValue="10" >
                <Appearance>
                    <FillStyle MainColor="Red" FillType="Solid" />
                </Appearance>
            </telerik:ChartSeriesItem>
            <telerik:ChartSeriesItem YValue="30" />
            <telerik:ChartSeriesItem YValue="10" />
        </Items>
    </telerik:ChartSeries>

    Regards,
    Sia
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.