Step-By-Step Skinning Example

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

   1. Appearance -> Appearance -> Border -> Color : 0; 66; 110
   2. Appearance -> Appearance -> Border -> Width : 5
   3. Appearance -> Appearance -> FillStyle -> FillType : Gradient
   4. Appearance -> Appearance -> FillStyle -> FillSettings -> GradientMode : Center
   5. Appearance -> Appearance -> FillStyle -> MainColor : 35; 189; 254
   6. Appearance -> Appearance -> FillStyle -> SecondColor : 26; 120; 179
   7.  

2. Styling the title

   1. Elements -> ChartTitle -> Appearance -> Border -> Visible : False
   2. Elements -> ChartTitle -> Appearance -> FillStyle -> MainColor : None / Transparent
   3. Elements -> ChartTitle -> TextBlock -> Appearance -> TextProperties -> Color : White
   4. Elements -> ChartTitle -> TextBlock -> Appearance -> TextProperties -> Font : Verdana; 14pt
   5. Elements -> ChartTitle -> Appearance ->Position -> AlignedPosition : TopLeft
   6. Elements -> ChartTitle -> Appearance -> Dimensions -> Margins : 4%; 10px; 14px; 8%

3. Styling the legend

   1. Elements -> Legend -> Appearance -> FillStyle -> MainColor : None / Transparent
   2. Elements -> Legend -> Appearance -> Border -> Visible : False
   3. Elements -> Legend -> Appearance -> ItemTextAppearance -> TextProperties -> Color : White
   4. Elements -> Legend -> TextBlock -> Text : Legend
   5. Elements -> Legend -> TextBlock -> Visible : True
   6. Elements -> Legend -> TextBlock -> Appearance -> TextProperties -> Color : LightSkyBlue
   7. Elements -> Legend -> TextBlock -> Appearance -> Position -> AlignedPosition : Top
   8. Elements -> Legend -> Appearance -> Position -> AlignedPosition -> BottomRight
   9. Elements -> Legend -> Appearance -> Dimensions -> Margins : 1px; 3%; 12%; 1px

4. Styling the plot area

   1. Elements -> PlotArea -> Appearance -> Border -> Color : 97; 180; 223
   2. Elements -> PlotArea -> Appearance -> FillStyle -> MainColor : 50; 255; 255; 255
   3. Elements -> PlotArea -> Appearance -> Dimensions -> Margins : 18%; 90px; 15%; 10%

5. Styling the X Axis

   1. Elements -> PlotArea -> XAxis -> Appearance -> Color : 96; 164; 205
   2. Elements -> PlotArea -> XAxis -> Appearance -> MajorGridLines -> Color : 120; 209; 248
   3. Elements -> PlotArea -> XAxis -> Appearance -> MajorTick -> Color : 96; 164; 205
   4. Elements -> PlotArea -> XAxis -> Appearance -> TextAppearance -> TextProperties -> Color : White
   5. Elements -> PlotArea -> XAxis -> AxisLabel -> TextBlock -> Text -> X Axis
   6. Elements -> PlotArea -> XAxis -> AxisLabel -> TextBlock -> Appearance -> TextProperties -> Color : LightSkyBlue
   7. Elements -> PlotArea -> XAxis -> AxisLabel -> Appearance -> Dimensions -> Paddings : 1px; 1px; 10%; 1px

6. Styling the Y Axis

   1. Elements -> PlotArea -> YAxis -> Appearance -> Color : 95; 165; 208
   2. Elements -> PlotArea -> YAxis -> Appearance -> MajorGridLines -> Color : 120; 209; 248
   3. Elements -> PlotArea -> YAxis -> Appearance -> MajorTick -> Color : 95; 165; 208
   4. Elements -> PlotArea -> YAxis -> Appearance -> MajorGridLines -> Color : 120; 209; 248
   5. Elements -> PlotArea -> YAxis -> Appearance -> MinorTick -> Color : 95; 165; 208
   6. Elements -> PlotArea -> YAxis -> Appearance -> TextAppearance -> TextProperties -> Color : White
   7. Elements -> PlotArea -> YAxis -> AxisLabel -> TextBlock -> Text -> Y Axis
   8. Elements -> PlotArea -> YAxis -> AxisLabel -> TextBlock -> Appearance -> TextProperties -> Color : LightSkyBlue

7. Styling the data series

   1. Data -> Series -> Series 1 -> Appearance -> Appearance -> Border -> Color : 153; 209; 248
   2. Data -> Series -> Series 1 -> Appearance -> Appearance -> FillStyle -> MainColor : 213; 247; 255
   3. Data -> Series -> Series 1 -> Appearance -> Appearance -> FillStyle -> SecondColor : 157; 217; 238
   4. Data -> Series -> Series 1 -> Appearance -> Appearance -> TextAppearance -> TextProperties -> Color : White
   5. Data -> Series -> Series 2 -> Appearance -> Appearance -> Border -> Color : 67; 181; 229
   6. Data -> Series -> Series 2 -> Appearance -> Appearance -> FillStyle -> MainColor : 136; 221; 246
   7. Data -> Series -> Series 2 -> Appearance -> Appearance -> FillStyle -> SecondColor : 59; 161; 197
   8. Data -> Series -> Series 2 -> Appearance -> Appearance -> TextAppearance -> TextProperties -> Color : White