Skip to main content

KPI Chart Label Properties

  • Updated

BackPrevious Topic  Next TopicNext

KPI Chart Label Properties

This topic describes the properties of a Chart Label object in a KPI chart.

Property NameDescription
Geometry
HeightSpecifies the height of the object. Type a numeric value to change the height.

Data type: Float

WidthSpecifies the width of the object. Type a numeric value to change the width.

Data type: Float

XSpecifies the horizontal coordinate of the object's top left corner, relative to its parent container. Type a numeric value to change the coordinate.

Data type: Float

YSpecifies the vertical coordinate of the object's top left corner, relative to its parent container. Type a numeric value to change the coordinate.

Data type: Float

CSS
ClassSpecifies the name of the Class Selector to apply to the object, which you define in the CSS file of the style the report applies.

For example, if you define the CSS file as follows:

@charset "GBK";
TextField {Background: #ff0000}
/*Style=LabelX*/
TextField[Style="LabelX"]{Background: #0000FF}
/*ID=W*/
TextField#W{Background: #FFFF00}
/*class=C*/
TextField.C{Background: #00FFFF}

To apply the Class Selector in the file to the object, type C in the value cell.

Data type: String

StyleSpecifies the style you want to apply to the object. You can specify the style in two ways:
  • Type the style which should be an Attribute Selector whose attribute is "style" in the CSS file of the style the report applies. For example, to apply the style in the preceding sample CSS file to the object, type LabelX in the value cell.
  • Choose a style from the drop-down list if you have specified the Style Group property for the web report and there are styles in the style group that are applicable to the object.

Data type: String

Label (for customizing text in the chart label)
Bottom MarginSpecifies the distance between the label text and the bottom border of the label, based on the alignment of the text. Type a numeric value to change the margin.

Data type: Float

ColorSpecifies the color to fill the element, when you set Fill Type of the element to "color". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Fill TransparencySpecifies the transparency for the fill pattern of the element, in percent. Type a numeric value to change the transparency.

Data type: Integer

Fill TypeSpecifies how you want to fill the element, by color, texture, or gradient, or not to fill it. Choose an option from the drop-down list.

Data type: Enumeration

Font EffectSpecifies the special effect of the label text. Choose an option from the drop-down list.
  • none
    Select if you do not want to apply any special effect to the text.
  • embossed
    Select to make the text appear to be raised off the page in relief.
  • engraved
    Select to make the text appear to be imprinted or pressed into the page.
  • shadowed
    Select to add a shadow beneath and to the right of the text.
  • outlined
    Select to display the exterior border around each character of the text.
  • shadowed & outlined
    Select to add a shadow beneath and to the right of the text and display the exterior border around each character.

Data type: Enumeration

Font FaceSpecifies the font face of the label text. Choose an option from the drop-down list.

Data type: Enumeration

Font RotationSpecifies the rotation angle of the label text around its center, in degrees. Type a numeric value to change the rotation.

Data type: Float

Font ScriptSpecifies to apply superscript or subscript formatting to the label text, or neither of them. Choose an option from the drop-down list.

Data type: Enumeration

Font ShearingSpecifies the shearing transformation of the label text around its center. Type a numeric value to change the shearing.

Data type: Float

Font SizeSpecifies the font size of the label text. Type an integer value to change the size.

Data type: Integer

Font StrikethroughSpecifies the style of the line to draw through the label text. Choose an option from the drop-down list.

Data type: Enumeration

Font StyleSpecifies the font style of the label text. Choose an option from the drop-down list.

Data type: Enumeration

Font UnderlineSpecifies the style of the horizontal line under the label text. Choose an option from the drop-down list. "patterned line" or "bold patterned" draws a line or bold line in the pattern of the text.

Data type: Enumeration

Critical icon Web Report Studio and JDashboard do not support underlining chart text so this property will be ignored when the chart runs in Web Report Studio or is used in a dashboard.

Gradient End ColorSpecifies the ending color of the gradient, when you set Fill Type of the element to "gradient". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Gradient End XSpecifies the horizontal position where the gradient ends when you set Fill Type of the element to "gradient", measured in a percentage of the element's width, from the left edge of the element.

Data type: Integer

Gradient End YSpecifies the vertical position where the gradient ends when you set Fill Type of the element to "gradient", measured in a percentage of the element's height, from the bottom edge of the element.

Data type: Integer

Gradient Start ColorSpecifies the starting color of the gradient, when you set Fill Type of the element to "gradient". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Gradient Start XSpecifies the horizontal position where the gradient begins when you set Fill Type of the element to "gradient", measured in a percentage of the element's width, from the left edge of the element.

Data type: Integer

Gradient Start YSpecifies the vertical position where the gradient begins when you set Fill Type of the element to "gradient", measured in a percentage of the element's height, from the bottom edge of the element.

Data type: Integer

Gradient StyleSpecifies the style of the gradient to fill the element, when you set Fill Type of the element to "gradient". Choose an option from the drop-down list.

Data type: Enumeration

Left MarginSpecifies the distance between the label text and the left border of the label, based on the alignment of the text. Type a numeric value to change the margin.

Data type: Float

Outline ColorSpecifies the color of the text outline, when you set Font Effect to "outlined" or "shadowed & outlined". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Outline End CapsSpecifies the ending style of the text outline, when you set Font Effect to "outlined" or "shadowed & outlined". Choose an option from the drop-down list.
  • butt
    Select to end unclosed subpaths and dash segments with no added decoration.
  • round
    Select to end unclosed subpaths and dash segments with a round decoration that has a radius equal to half of the line width.
  • square
    Select to end unclosed subpaths and dash segments with a square projection that extends beyond the end of the segment to a distance equal to half of the line width.

Data type: Enumeration

Outline JointSpecifies the joint style of the text outline, when you set Font Effect to "outlined" or "shadowed & outlined". Choose an option from the drop-down list.
  • miter
    Select to join path segments by extending their outside edges until they meet.
  • round
    Select to join path segments by rounding off the corner at a radius of half the line width.
  • bevel
    Select to join path segments by connecting the outer corners of their wide outlines with a straight segment.

Data type: Enumeration

Outline OutlinedSpecifies whether to use outline path for the text outline, when you set Font Effect to "outlined" or "shadowed & outlined". Default is to apply fill path.

Data type: Boolean

Outline StyleSpecifies the style of the text outline, when you set Font Effect to "outlined" or "shadowed & outlined". Choose an option from the drop-down list.

Data type: Enumeration

Outline ThicknessSpecifies the width of the text outline, when you set Font Effect to "outlined" or "shadowed & outlined". Type a numeric value to change the thickness.

Data type: Float

Outline TransparencySpecifies the transparency of the text outline, when you set Font Effect to "outlined" or "shadowed & outlined". Type a numeric value to change the transparency.

Data type: Integer

Outline Variable DashSpecifies whether to resize the dash automatically when you select a dash line style for Outline Style. Default is to apply fixed dash size.

Data type: Boolean

Right MarginSpecifies the distance between the label text and the right border of the label, based on the alignment of the text. Type a numeric value to change the margin.

Data type: Float

TextSpecifies the text of the label. Type a string to change the text.

Data type: String

Text AlignmentSpecifies the alignment of the text in the label. Choose an option from the drop-down list.

Data type: Enumeration

Texture Background ColorSpecifies the background color of the texture, when you set Fill Type of the element to "texture". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Texture Foreground ColorSpecifies the foreground color of the texture, when you set Fill Type of the element to "texture". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Texture StyleSpecifies the style of the texture to fill the element, when you set Fill Type of the element to "texture". Choose an option from the drop-down list.

Data type: Enumeration

Top MarginSpecifies the distance between the label text and the top border of the label, based on the alignment of the text. Type a numeric value to change the margin.

Data type: Float

Word WrapSpecifies whether to wrap the label text according to the width of the label. If the text contains special characters (such as ",", ".", and space), it wraps at the position of one of the characters.

Data type: Boolean

Note icon This property does not take effect for radar charts, bubble charts, scatter charts, or gauge charts.

Background (for customizing fill pattern of the chart label)
Border ColorSpecifies the color for the border of the element. Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Border End CapsSpecifies the ending style for the border of the element. Choose an option from the drop-down list.
  • butt
    Select to end unclosed subpaths and dash segments with no added decoration.
  • round
    Select to end unclosed subpaths and dash segments with a round decoration that has a radius equal to half of the line width.
  • square
    Select to end unclosed subpaths and dash segments with a square projection that extends beyond the end of the segment to a distance equal to half of the line width.

Data type: Enumeration

Border JointSpecifies the joint style for the border of the element. Choose an option from the drop-down list.
  • miter
    Select to join path segments by extending their outside edges until they meet.
  • round
    Select to join path segments by rounding off the corner at a radius of half the line width.
  • bevel
    Select to join path segments by connecting the outer corners of their wide outlines with a straight segment.

Data type: Enumeration

Border OutlinedSpecifies whether to use outline path for the border of the element. Default is to apply fill path.

Data type: Boolean

Border StyleSpecifies the line style for the border of the element. Choose an option from the drop-down list.

Data type: Enumeration

Border ThicknessSpecifies the width for the border of the element. Type a numeric value to change the thickness.

Data type: Float

Border TransparencySpecifies the transparency for the border of the element, in percent. Type a numeric value to change the transparency.

Data type: Integer

Border TypeSpecifies the type for the border of the element.
  • none
    Select if you do not want to show the border.
  • raised
    Select to show 3-D border that appears as if it is raised off the page.
  • recess
    Select to show 3-D border that appears as if it is pressed into the page.
  • shadow
    Select to show two shadowed borders, beneath and to the right of the object.
  • solid
    Select to use single-line border.

Data type: Enumeration

Border Variable DashSpecifies whether to resize the dash automatically when you select a dash line style for Border Style. Default is to apply fixed dash size.

Data type: Boolean

ColorSpecifies the color to fill the element, when you set Fill Type of the element to "color". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Fill TransparencySpecifies the transparency for the fill pattern of the element, in percent. Type a numeric value to change the transparency.

Data type: Integer

Fill TypeSpecifies how you want to fill the element, by color, texture, gradient, or image, or not to fill it. Choose an option from the drop-down list.

Data type: Enumeration

Gradient End ColorSpecifies the ending color of the gradient, when you set Fill Type of the element to "gradient". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Gradient End XSpecifies the horizontal position where the gradient ends when you set Fill Type of the element to "gradient", measured in a percentage of the element's width or the width of the inset in the element if you define an inset, from the left edge of the element or inset.

Data type: Integer

Gradient End YSpecifies the vertical position where the gradient ends when you set Fill Type of the element to "gradient", measured in a percentage of the element's height or the height of the inset in the element if you define an inset, from the bottom edge of the element or inset.

Data type: Integer

Gradient Start ColorSpecifies the starting color of the gradient, when you set Fill Type of the element to "gradient". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Gradient Start XSpecifies the horizontal position where the gradient begins when you set Fill Type of the element to "gradient", measured in a percentage of the element's width or the width of the inset in the element if you define an inset, from the left edge of the element or inset.

Data type: Integer

Gradient Start YSpecifies the vertical position where the gradient begins when you set Fill Type of the element to "gradient", measured in a percentage of the element's height or the height of the inset in the element if you define an inset, from the bottom edge of the element or inset.

Data type: Integer

Gradient StyleSpecifies the style of the gradient to fill the element, when you set Fill Type of the element to "gradient". Choose an option from the drop-down list.

Data type: Enumeration

Image FileSpecifies the file name of the image, a portion of which you want to use to fill the element, when you set Fill Type of the element to "image". Type the file name with suffix in the value cell. If the image is outside the current catalog, you should include the full path of the image correctly.

Data type: String

Image HeightYou can use the four properties, Image Height, Image Width, Image X, and Image Y, to define a portion of an image (the portion is a rectangle) to fill the element, when you set Fill Type of the element to "image".

Image Height specifies the height of the portion, measured in a percentage of the image's height.

Data type: Integer

Image LayoutSpecifies the layout of the image portion to fill the element, when you set Fill Type of the element to "image". Choose an option from the drop-down list.
  • tile
    Select to repeat the image portion to fill the element.
  • center
    Select to display the image portion in the center of the element.
  • scaled
    Select to stretch the image portion to cover the entire element.

Data type: Enumeration

Image WidthYou can use the four properties, Image Height, Image Width, Image X, and Image Y, to define a portion of an image (the portion is a rectangle) to fill the element, when you set Fill Type of the element to "image".

Image Width specifies the width of the portion, measured in a percentage of the image's width.

Data type: Integer

Image XYou can use the four properties, Image Height, Image Width, Image X, and Image Y, to define a portion of an image (the portion is a rectangle) to fill the element, when you set Fill Type of the element to "image".

Image X specifies the left position of the portion, measured in a percentage of the image's width, from the left edge of the image.

Data type: Integer

Image YYou can use the four properties, Image Height, Image Width, Image X, and Image Y, to define a portion of an image (the portion is a rectangle) to fill the element, when you set Fill Type of the element to "image".

Image Y specifies the top position of the portion, measured in a percentage of the image's height, from the bottom edge of the image.

Data type: Integer

Inset BottomYou can use the four properties, Inset Bottom, Inset Left, Inset Right, and Inset Top, to define an inset in the element and fill the inset instead of the entire element.

Inset Bottom specifies the bottom position of the inset, measured in a percentage of the element's height, from the bottom edge of the element.

Data type: Float

Inset LeftYou can use the four properties, Inset Bottom, Inset Left, Inset Right, and Inset Top, to define an inset in the element and fill the inset instead of the entire element.

Inset Left specifies the left position of the inset, measured in a percentage of the element's width, from the left edge of the element.

Data type: Float

Inset RightYou can use the four properties, Inset Bottom, Inset Left, Inset Right, and Inset Top, to define an inset in the element and fill the inset instead of the entire element.

Inset Right specifies the right position of the inset, measured in a percentage of the element's width, from the right edge of the element.

Data type: Float

Inset TopYou can use the four properties, Inset Bottom, Inset Left, Inset Right, and Inset Top, to define an inset in the element and fill the inset instead of the entire element.

Inset Top specifies the top position of the inset, measured in a percentage of the element's height, from the top edge of the element.

Data type: Float

Texture Background ColorSpecifies the background color of the texture, when you set Fill Type of the element to "texture". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Texture Foreground ColorSpecifies the foreground color of the texture, when you set Fill Type of the element to "texture". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Texture StyleSpecifies the style of the texture to fill the element, when you set Fill Type of the element to "texture". Choose an option from the drop-down list.

Data type: Enumeration

Icon (for customizing the icon in the chart label)
Border ColorSpecifies the color for the border of the element. Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Border End CapsSpecifies the ending style for the border of the element. Choose an option from the drop-down list.
  • butt
    Select to end unclosed subpaths and dash segments with no added decoration.
  • round
    Select to end unclosed subpaths and dash segments with a round decoration that has a radius equal to half of the line width.
  • square
    Select to end unclosed subpaths and dash segments with a square projection that extends beyond the end of the segment to a distance equal to half of the line width.

Data type: Enumeration

Border JointSpecifies the joint style for the border of the element. Choose an option from the drop-down list.
  • miter
    Select to join path segments by extending their outside edges until they meet.
  • round
    Select to join path segments by rounding off the corner at a radius of half the line width.
  • bevel
    Select to join path segments by connecting the outer corners of their wide outlines with a straight segment.

Data type: Enumeration

Border OutlinedSpecifies whether to use outline path for the border of the element. Default is to apply fill path.

Data type: Boolean

Border StyleSpecifies the line style for the border of the element. Choose an option from the drop-down list.

Data type: Enumeration

Border ThicknessSpecifies the width for the border of the element. Type a numeric value to change the thickness.

Data type: Float

Border TransparencySpecifies the transparency for the border of the element, in percent. Type a numeric value to change the transparency.

Data type: Integer

Border Variable DashSpecifies whether to resize the dash automatically when you select a dash line style for Border Style. Default is to apply fixed dash size.

Data type: Boolean

ColorSpecifies the color to fill the element, when you set Fill Type of the element to "color". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Fill TransparencySpecifies the transparency for the fill pattern of the element, in percent. Type a numeric value to change the transparency.

Data type: Integer

Fill TypeSpecifies how you want to fill the element, by color, texture, gradient, or image, or not to fill it. Choose an option from the drop-down list.

Data type: Enumeration

Gradient End ColorSpecifies the ending color of the gradient, when you set Fill Type of the element to "gradient". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Gradient End XSpecifies the horizontal position where the gradient ends when you set Fill Type of the element to "gradient", measured in a percentage of the element's width, from the left edge of the element.

Data type: Integer

Gradient End YSpecifies the vertical position where the gradient ends when you set Fill Type of the element to "gradient", measured in a percentage of the element's height, from the bottom edge of the element.

Data type: Integer

Gradient Start ColorSpecifies the starting color of the gradient, when you set Fill Type of the element to "gradient". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Gradient Start XSpecifies the horizontal position where the gradient begins when you set Fill Type of the element to "gradient", measured in a percentage of the element's width, from the left edge of the element.

Data type: Integer

Gradient Start YSpecifies the vertical position where the gradient begins when you set Fill Type of the element to "gradient", measured in a percentage of the element's height, from the bottom edge of the element.

Data type: Integer

Gradient StyleSpecifies the style of the gradient to fill the element, when you set Fill Type of the element to "gradient". Choose an option from the drop-down list.

Data type: Enumeration

HeightSpecifies the height of the icon. Type a numeric value to change the height.

Data type: Float

Icon AlignmentSpecifies the alignment of the icon relative to the text in the label. Choose an option from the drop-down list.

Data type: Enumeration

Icon StyleSpecifies the style of the icon to display in the label. Choose an option from the drop-down list.

Data type: Enumeration

Icon Text GapSpecifies the distance between the icon and the label text. Type a numeric value to change the gap.

Data type: Float

Image FileSpecifies the file name of the image, a portion of which you want to use to fill the element, when you set Fill Type of the element to "image". Type the file name with suffix in the value cell. If the image is outside the current catalog, you should include the full path of the image correctly.

Data type: String

Image HeightYou can use the four properties, Image Height, Image Width, Image X, and Image Y, to define a portion of an image (the portion is a rectangle) to fill the element, when you set Fill Type of the element to "image".

Image Height specifies the height of the portion, measured in a percentage of the image's height.

Data type: Integer

Image LayoutSpecifies the layout of the image portion to fill the element, when you set Fill Type of the element to "image". Choose an option from the drop-down list.
  • tile
    Select to repeat the image portion to fill the element.
  • center
    Select to display the image portion in the center of the element.
  • scaled
    Select to stretch the image portion to cover the entire element.

Data type: Enumeration

Image WidthYou can use the four properties, Image Height, Image Width, Image X, and Image Y, to define a portion of an image (the portion is a rectangle) to fill the element, when you set Fill Type of the element to "image".

Image Width specifies the width of the portion, measured in a percentage of the image's width.

Data type: Integer

Image XYou can use the four properties, Image Height, Image Width, Image X, and Image Y, to define a portion of an image (the portion is a rectangle) to fill the element, when you set Fill Type of the element to "image".

Image X specifies the left position of the portion, measured in a percentage of the image's width, from the left edge of the image.

Data type: Integer

Image YYou can use the four properties, Image Height, Image Width, Image X, and Image Y, to define a portion of an image (the portion is a rectangle) to fill the element, when you set Fill Type of the element to "image".

Image Y specifies the top position of the portion, measured in a percentage of the image's height, from the bottom edge of the image.

Data type: Integer

Texture Background ColorSpecifies the background color of the texture, when you set Fill Type of the element to "texture". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Texture Foreground ColorSpecifies the foreground color of the texture, when you set Fill Type of the element to "texture". Choose a color from the drop-down list, or select Custom to customize a color in the Pick a Color dialog box. You can also type a hexadecimal RGB value (for example, 0xff0000) to specify a color.

Data type: String

Texture StyleSpecifies the style of the texture to fill the element, when you set Fill Type of the element to "texture". Choose an option from the drop-down list.

Data type: Enumeration

WidthSpecifies the width of the icon. Type a numeric value to change the width.

Data type: Float

BackPrevious Topic  Next TopicNext