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

RadChart has been replaced by RadHtmlChart, Telerik's client-side charting component. If you are considering RadChart for new development, examine the RadHtmlChart documentation and online demos first to see if it will fit your development needs. If you are already using RadChart in your projects, you can migrate to RadHtmlChart by following these articles: Migrating Series, Migrating Axes, Migrating Date Axes, Migrating Databinding, Features parity. Support for RadChart is discontinued as of Q3 2014, but the control will remain in the assembly so it can still be used. We encourage you to use RadHtmlChart for new development.

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