graph » series » value-box

value-box, valueBox

[ root » graph » series » value-box]

Value boxes are fixed labels adjacent to the data points on your chart. Refer to the Value Boxes Tutorial for more information.


AttributeTypeInfo
alphaNumeric

Sets the transparency of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Note that values require the leading 0 before the decimal point. Use with "background-color" attribute.

0.3 | 0.4 | 0.9 | ...

angleNumeric

Sets the rotation angle of the object. A positive value will turn it in a clockwise direction. A negative value will turn it in a counterclockwise direction.

-90 | 270 | 180 | ...

background-color
backgroundColor
String

Sets the background color of the object. Colors can be entered by name (e.g., "purple", "blue"), hexadecimal notation (e.g., "#FF0000", "#0000FF"), or RGB notation (e.g., "rgb(255,0,0)", "rgb(0,0,255)").

One color will set a solid background color. Two colors will, by default, create a horizontal gradient. For more complex gradients, use "gradient-colors" and "gradient-stops".

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

background-color-1
backgroundColor1
String

Sets the first color of a two-color background gradient. To be used with "background-color-2".

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

background-color-2
backgroundColor2
String

Sets the second color of a two-color background gradient. To be used with "background-color-1".

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

background-fit
backgroundFit
String

Sets the direction(s) in which the background image is being stretched. Works with "background-image".

"x" | "y" | "xy"

background-image
backgroundImage
String

Sets a background image for the object. Value can be a local file or a web image's location.

"image.png" | ...

background-position
backgroundPosition
String

Sets the position of the background when the "background-repeat" attribute is set to "no-repeat".

"0 0" | "50 100" | "80% 60%" | ...

background-repeat
backgroundRepeat
String

Sets the repeating mode for the background image. Works with "background-image".

"no-repeat" | "repeat" | "repeat-x" | "repeat-y"

border-alpha
borderAlpha
Numeric

Sets the transparency of the border. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal.

0.3 | 0.9 | ...

border-color
borderColor
String

Sets the border color of the object, applicable on closed shapes. See the "line-color" attribute for closed shapes.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

border-width
borderWidth
Mixed

Sets the border width of the object, applicable on closed shapes. See the "line-width" attribute for closed shapes.

4 | "6px" | ...

calloutBoolean

Sets whether or not the object will have a callout arrow.

true | false | 1 | 0

connectedBoolean

Pie Charts Only: When value boxes are set to "placement":"out", you can add a connecting line between the text and its corresponding pie slice. Refer to the Pie Chart Tutorial for more information.

true | false | 1 | 0

decimalsNumeric

Allows you to set the number of decimal places displayed for each value.

2 | 3 | 10 | ...

decimals-separator
decimalsSeparator
String

Allows you to set the decimal mark displayed for each value.

"." | "," | " " | ...

fill-angle
fillAngle
Numeric

Sets the angle of the axis along which the linear gradient is drawn.

-45 | 115 | ...

fill-offset-x
fillOffsetX
Mixed

Sets an X offset to apply to the object.

5 | "10px" | ...

fill-offset-y
fillOffsetY
Mixed

Sets a Y offset to apply to the object.

5 | "10px" | ...

fill-type
fillType
String

Sets the background gradient fill type to linear or radial.

"linear" | "radial"

font-color
fontColor
String

Sets the font color of the object. Similar to the "color" attribute.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

font-family
fontFamily
String

Sets the font family of the object.

"Arial" | "Tahoma,Verdana" | ...

font-size
fontSize
String

Sets the font size of the object.

4 | "6px" | ...

font-style
fontStyle
String

Sets the font style of the object. Similar to the "italic" attribute.

"none" | "italic"

font-weight
fontWeight
String

Sets the font weight of the object. Similar to the "bold" attribute.

"normal" | "bold"

gradient-colors
gradientColors
String

Sets the colors for a complex background gradient consisting of two or more colors. Use with the "gradient-stops" attribute. Works with output svg.

"#f00 #0f0 #00f" | ...

gradient-stops
gradientStops
String

Sets the gradient stops for a complex background gradient consisting of two or more colors. Use with the "gradient-colors" attribute. Works with output svg.

"0.1 0.5 0.9" | ...

line-style
lineStyle
String

Sets the style applied to lines and borders of the object.

"solid" | "dotted" | "dashed" | "dashdot"

offset-x
offsetX
Mixed

Sets an X offset to apply when positioning the object.

4 | "6px" | ...

offset-y
offsetY
Mixed

Sets a Y offset to apply when positioning the object.

4 | "6px" | ...

paddingMixed

Sets the padding of the object.

10 | "5px" | "10 20" | "5px 10px 15px 20px" | ...

placementMixed

Specifies where the value boxes are placed in relation to the data points.

Options by chart type:

"in" | "out" | "auto" | "left" | "right" | "over" | ...

rtl (right-to-left)Boolean

Renders text right-to-left. Default value is false.

true | false | 1 | 0

shadowBoolean

Sets whether or not the object's shadow is visible.

Has limited effect on HTML5 implementation.

true | false | 1 | 0

textMixed

Sets the value box text to be displayed. You can provide any combination of alphanumeric characters and/or ZingChart tokens. Refer to the ZingChart Tokens Tutorial for more information and a list of available tokens.

"%v widgets" | "Top Sales: %v" | "$%v" | "%v %t" | "..."

text-alpha
textAlpha
Numeric

Sets the transparency of the text. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal.

0.3 | 0.9 | ...

thousands-separator
thousandsSeparator
String

Sets the character used to separate thousands.

"," | "." | " " | ...

typeString

Specifies which value boxes are displayed. By default, all values in a series are displayed. You can also display the minimum, maximum, first, last, and/or no values.

"all" | "min" | "max" | "first" | "last" | none" | "min,max" | "first,last,min,max" | ...

visibleBoolean

Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON.

true | false | 1 | 0