Step-By-Step Skinning Example

RadChart has been deprecated since Q3 2014 and is no longer recommended for use, as it does not support modern browsers. We strongly recommend using RadHtmlChart, Telerik's modern client-side charting component. To transition from RadChart to RadHtmlChart, refer to the following migration articles:

• Migrating Series
• Migrating Axes
• Migrating Date Axes
• Migrating Databinding
• Features parity

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