Custom CSS Table for Chart Appearance

Custom CSS Table for Chart Appearance

<Appearance>
CSS Property Values Description
Corners Corners=”Round”
Corners=”Rectangle”
Values will correspond to the sides of your chart in order of
Top-Left, Top-Right, Bottom-Right, Bottom-Left, Pixels.

Example: Corners=”Round, Round, Round, Round, 8″
This will produce a chart with Top-Left, Top-Right, Bottom-Right, and Bottom-Left corners rounded with a corner thickness of eight pixels.
TextQuality
TextQuality=”SystemDefault” This will format your text to the default setting of your SharePoint site.
TextQuality=”SingleBitPerPixel” Use only a single bit of color per pixel. This will result in a black-and-white font.
TextQuality=”SingleBitPerPixelGridFit” A SingleBitPerPixel font which will not extend above or below a set of invisible grid lines.
TextQuality=”AntiAlias” Fonts will appear with rounded edges.
TextQuality=”AntiAliasGridFit” An AntiAliased font which will not extend above or below a set of invisible grid lines.
<Appearance> <FillStyle>
CSS Property Values Description
MainColor
MainColor=”HexaDecimal Replace italicized text with a Hexadecimal value in order to specify a color. Example: MainColor=”00FF00″
MainColor=”Color Name Replace italicized text with a color name to specify a color.
Example: MainColor=”yellow”
MainColor=”RGB Replace italicized text with an RGB value in order to specify a color.
Example: MainColor=”rgb(255,255,0)”
SecondColor
SecondColor=”HexaDecimal Please refer to the notes for the “MainColor” attributes.
SecondColor=”Color Name
SecondColor=”RGB
FillStyle
FillStyle=”Solid” Fill your chart with a single, solid color.
FillStyle=”Gradient” Fill your chart with a background gradient.
FillStyle=”ComplexGradient” Fill your chart with a complex gradient.
FillStyle=”Hatch” Fill your chart with a hatch pattern.
FillStyle=”Image” Use an image for the background of your chart.
<Appearance> <FillStyle=”ComplexGradient”> <FillSettings> (For <FillType=”ComplexGradient”> only)
CSS Property Values Description
GradientMode
GradientMode=”Horizontal” Gradient will fade horizontally.
GradientMode=”Vertical” Gradient will fade vertically.
<Appearance> <FillStyle=”ComplexGradient”> <FillSettings> <ComplexGradient> <GradientElement> (For <FillType=”ComplexGradient”> only)
CSS Property Values Description
Color
Color=”HexaDecimal Replace italicized text with a Hexadecimal value in order to specify a color.
Example: MainColor=”00FF00″
SecondColor=”Color Name Replace italicized text with a color name to specify a color.
Example: MainColor=”yellow”
SecondColor=”RGB Replace italicized text with an RGB value in order to specify a color.
Example: MainColor=”rgb(255,255,0)”
Position Position=”Decimal”

Use a decimal value to determine chart position.

NOTE: this value must be lower than or equal to 1.

<Appearance> <Dimensions>
CSS Property Values Description
*** Margin***
Margin=”Pixels(px) or Percentage(%)”
Replace italicized text with a number value indicating the desired width for chart margins. Use either a specific number of pixels or a percentage of the area the page.
Example: Margin=”10px” — This will add a margin all around your chart that is ten pixels wide,
or
Margin=”15%” — This will add a margin all around your chart is equal to 15% of the total area of the page.
Values will correspond to the sides of your chart in order of Top, Right, Bottom, Left.
Example: Margin=”5px, 10px, 5%, 10px”
This will produce a chart with a top margin of 5 pixels, a right margin of 10 pixels, a bottom margin of 5 percent of the page’s area, and a left margin of 10 pixels.
Padding
Padding=”Pixels(px) or Percentage(%)
Replace italicized text with a number value indicating the desired width for chart padding. Use either a specific number of pixels or a percentage of the area the page.
Padding differs from margins in that margins are a fixed value in relation to the outside edges of the chart; padding is a fixed value in relation to the inside edges of the chart.
Therefore, margins will move the chart away from other objects/the edges of the web page; padding will move the contents of the chart away from the inside edges of the chart.
Values will correspond to the sides of your chart in order of Top, Right, Bottom, Left.
Example: Padding=”5px, 10px, 5%, 10px”
This will produce a chart with a top padding of 5 pixels, a right padding of 10 pixels, a bottom padding of 5 percent of the page’s area, and a left padding of 10 pixels.
<Appearance> <Border>
CSS Property Values Description
Color
Color=”HexaDecimal Replace italicized text with a Hexadecimal value in order to specify a color.
Example: MainColor=”00FF00″
SecondColor=”Color Name Replace italicized text with a color name to specify a color.
Example: MainColor=”yellow”
SecondColor=”RGB Replace italicized text with an RGB value in order to specify a color.
Example: MainColor=”rgb(255,255,0)”
Width Width=”Pixel(s)” Specify the thickness of the border around your Chart Title in pixels. Example: Width=5px;
<TextBlock> <Appearance> <TextProperties>
CSS Property Values Description
Font
Font-Family=”Font Name Replace italicized text with a font name to change the font of your chart text.
Font-Size=”XX Replace the italicized text with a number. Specify size using typographic points(pt) or pixels(px)
Example: Font-Size=”14pt” or Font-Size=”14px”
Font-Style=”Style Name Replace italicized text with a style name. Acceptable style names are: “normal”, “italic”, and “oblique”.
Color
Color=”HexaDecimal Replace italicized text with a Hexadecimal value in order to specify a color.
Example: MainColor=”00FF00″
Color=”Color Name background-color: whiteReplace italicized text with a color name to specify a color.
Example: MainColor=”yellow”
Color=”RGB Replace italicized text with an RGB value in order to specify a color.
Example: MainColor=”rgb(255,255,0)”