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

alpha

Numeric

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 | ...

angle

Numeric

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" | ...

callout

Boolean

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

true | false | 1 | 0

connected

Boolean

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

decimals

Numeric

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" | ...

padding

Mixed

Sets the padding of the object.

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

placement

Mixed

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

shadow

Boolean

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

Has limited effect on HTML5 implementation.

true | false | 1 | 0

text

Mixed

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.

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

type

String

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" | ...

visible

Boolean

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

true | false | 1 | 0