Edit this page

Step-By-Step Skinning Example

caution

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

  8. Styling the title

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

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

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

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

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

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

  15. Styling the legend

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

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

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

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

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

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

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

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

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

  25. Styling the plotarea

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

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

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

  29. Styling the X Axis

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

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

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

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

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

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

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

  37. Styling the Y Axis

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

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

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

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

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

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

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

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

  46. Styling the data series

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

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

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

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

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

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

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

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