Edit this page

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

chart-styling-radcharts-step-by-step-skinning-example 001

Was this article helpful? Yes No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy