Introduction
Knowledge Base
Controls / Chart (Obsolete) / Styling RadCharts / Step-By-Step Skinning Example
New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Step-By-Step Skinning Example

Updated on Jul 8, 2026

RadChart has been deprecated since Q3 2014 and is marked as obsolete as of the 2026 Q2 SP1 (v2026.2.708) release. This is the last release that includes the RadChart component — its source code will be removed from the assembly in the next release. We strongly recommend using RadHtmlChart, Telerik's modern client-side charting component. To transition from RadChart to RadHtmlChart, refer to the following migration articles:

Explore the RadHtmlChart documentation and online demos to determine how it fits your development needs.

Here is a list of the steps one has to make in order to style RadChart to look like the image we used when describing the Chart elements. We start with a plain chart with no visual properties defined.

  1. Styling the chart’s borders and background

  2. Appearance -> Appearance -> Border -> Color : 0; 66; 110

  3. Appearance -> Appearance -> Border -> Width : 5

  4. Appearance -> Appearance -> FillStyle -> FillType : Gradient

  5. Appearance -> Appearance -> FillStyle -> FillSettings -> GradientMode : Center

  6. Appearance -> Appearance -> FillStyle -> MainColor : 35; 189; 254

  7. Appearance -> Appearance -> FillStyle -> SecondColor : 26; 120; 179

  9. Styling the title

  10. Elements -> ChartTitle -> Appearance -> Border -> Visible : False

  11. Elements -> ChartTitle -> Appearance -> FillStyle -> MainColor : None / Transparent

  12. Elements -> ChartTitle -> TextBlock -> Appearance -> TextProperties -> Color : White

  13. Elements -> ChartTitle -> TextBlock -> Appearance -> TextProperties -> Font : Verdana; 14pt

  14. Elements -> ChartTitle -> Appearance ->Position -> AlignedPosition : TopLeft

  15. Elements -> ChartTitle -> Appearance -> Dimensions -> Margins : 4%; 10px; 14px; 8%

  16. Styling the legend

  17. Elements -> Legend -> Appearance -> FillStyle -> MainColor : None / Transparent

  18. Elements -> Legend -> Appearance -> Border -> Visible : False

  19. Elements -> Legend -> Appearance -> ItemTextAppearance -> TextProperties -> Color : White

  20. Elements -> Legend -> TextBlock -> Text : Legend

  21. Elements -> Legend -> TextBlock -> Visible : True

  22. Elements -> Legend -> TextBlock -> Appearance -> TextProperties -> Color : LightSkyBlue

  23. Elements -> Legend -> TextBlock -> Appearance -> Position -> AlignedPosition : Top

  24. Elements -> Legend -> Appearance -> Position -> AlignedPosition -> BottomRight

  25. Elements -> Legend -> Appearance -> Dimensions -> Margins : 1px; 3%; 12%; 1px

  26. Styling the plotarea

  27. Elements -> PlotArea -> Appearance -> Border -> Color : 97; 180; 223

  28. Elements -> PlotArea -> Appearance -> FillStyle -> MainColor : 50; 255; 255; 255

  29. Elements -> PlotArea -> Appearance -> Dimensions -> Margins : 18%; 90px; 15%; 10%

  30. Styling the X Axis

  31. Elements -> PlotArea -> XAxis -> Appearance -> Color : 96; 164; 205

  32. Elements -> PlotArea -> XAxis -> Appearance -> MajorGridLines -> Color : 120; 209; 248

  33. Elements -> PlotArea -> XAxis -> Appearance -> MajorTick -> Color : 96; 164; 205

  34. Elements -> PlotArea -> XAxis -> Appearance -> TextAppearance -> TextProperties -> Color : White

  35. Elements -> PlotArea -> XAxis -> AxisLabel -> TextBlock -> Text -> X Axis

  36. Elements -> PlotArea -> XAxis -> AxisLabel -> TextBlock -> Appearance -> TextProperties -> Color : LightSkyBlue

  37. Elements -> PlotArea -> XAxis -> AxisLabel -> Appearance -> Dimensions -> Paddings : 1px; 1px; 10%; 1px

  38. Styling the Y Axis

  39. Elements -> PlotArea -> YAxis -> Appearance -> Color : 95; 165; 208

  40. Elements -> PlotArea -> YAxis -> Appearance -> MajorGridLines -> Color : 120; 209; 248

  41. Elements -> PlotArea -> YAxis -> Appearance -> MajorTick -> Color : 95; 165; 208

  42. Elements -> PlotArea -> YAxis -> Appearance -> MajorGridLines -> Color : 120; 209; 248

  43. Elements -> PlotArea -> YAxis -> Appearance -> MinorTick -> Color : 95; 165; 208

  44. Elements -> PlotArea -> YAxis -> Appearance -> TextAppearance -> TextProperties -> Color : White

  45. Elements -> PlotArea -> YAxis -> AxisLabel -> TextBlock -> Text -> Y Axis

  46. Elements -> PlotArea -> YAxis -> AxisLabel -> TextBlock -> Appearance -> TextProperties -> Color : LightSkyBlue

  47. Styling the data series

  48. Data -> Series -> Series 1 -> Appearance -> Appearance -> Border -> Color : 153; 209; 248

  49. Data -> Series -> Series 1 -> Appearance -> Appearance -> FillStyle -> MainColor : 213; 247; 255

  50. Data -> Series -> Series 1 -> Appearance -> Appearance -> FillStyle -> SecondColor : 157; 217; 238

  51. Data -> Series -> Series 1 -> Appearance -> Appearance -> TextAppearance -> TextProperties -> Color : White

  52. Data -> Series -> Series 2 -> Appearance -> Appearance -> Border -> Color : 67; 181; 229

  53. Data -> Series -> Series 2 -> Appearance -> Appearance -> FillStyle -> MainColor : 136; 221; 246

  54. Data -> Series -> Series 2 -> Appearance -> Appearance -> FillStyle -> SecondColor : 59; 161; 197

  55. Data -> Series -> Series 2 -> Appearance -> Appearance -> TextAppearance -> TextProperties -> Color : White

Not finding the help you need?
Contact Support