button

[ root » gui » context-menu » button ]

Use the button object to create a context menu button for your chart. You must add a visible attribute set to true for the button to appear. Refer to the Context Menu Tutorial for more information.

Note: If you are creating charts that will be primarily viewed on mobile devices, we recommend using the ZingChart mobile charts plugin. The plugin allows for the utilization of touch gestures and includes a mobile context menu.

AttributeTypeInfo

alpha

Numeric

Demo

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. Please note that values also require the leading 0 before the decimal.

0.3 | 0.9 | ...

background-color backgroundColor

String

Demo

Sets the background color of the object. A single color will create a solid background, while two colors will create a gradient.

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

border-width borderWidth

Mixed

Demo

Sets the width of the object's border.

4 | "6px" | ...

font-color fontColor

String

Demo

Sets the object's font color. Similar to color.

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

font-family fontFamily

String

Demo

Sets the object's font family.

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

font-size fontSize

Mixed

Demo

Sets the object's font size.

4 | "6px" | ...

font-style fontStyle

String

Demo

Sets the object's font style. Similar to italic.

"none" | "italic" | "oblique"

font-weight fontWeight

String

Demo

Sets the object's font weight. Similar to bold.

"normal" | "bold"

height

Mixed

Demo

Sets the object's height.

10 | "20px" | 0.3 | "30%" | ...

max-chars maxChars

Numeric

Demo

Sets the maximum numbers of characters displayed in the object. The value determines how many characters will be displayed before the text is cut and appended with "..."

5 | 10 | ...

max-width maxWidth

Mixed

Demo

Sets the maximum width of the text box. If text is longer than the max-width value, it will overlap the box or will wrap if wrap-text is set to true.

10 | "20px" | 0.3 | "30%" | ...

offset-x offsetX

Mixed

Demo

Sets an X offset to apply when positioning the object/shape.

4 | "6px" | ...

offset-y offsetY

Mixed

Demo

Sets a Y offset to apply when positioning the object/shape.

4 | "6px" | ...

padding

Mixed

Demo

Sets the padding around the object's text. Up to four values can be used to set the padding around the text, with the first value being the top padding, the second value being the right padding, the third value being the bottom padding, and the fourth value being the left padding.

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

padding-bottom paddingBottom

Mixed

Demo

Sets the bottom padding for the object's text.

4 | "6px" | ...

padding-left paddingLeft

Mixed

Demo

Sets the left padding for the object's text.

4 | "6px" | ...

padding-right paddingRight

Mixed

Demo

Sets the right padding for the object's text.

4 | "6px" | ...

padding-top paddingTop

Mixed

Demo

Sets the top padding for the object's text.

4 | "6px" | ...

rtl (right-to-left)

Boolean

Demo

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

true | false | 1 | 0

text

String

Demo

Sets the text content of the object.

"Some Text" | ...

text-align textAlign

String

Demo

Sets the horizontal alignment for the object's text. Horizontal alignment can be left, center, or right.

"left" | "center" | "right"

text-alpha textAlpha

Numeric

Demo

Sets the transparency of the object's 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 | ...

text-decoration textDecoration

String

Demo

Sets the text's decoration to use underlined characters. Similar to underline.

May not display properly in Mozilla Firefox when charts are rendered using SVG.

"none" | "underline"

visible

Boolean

Demo

Sets whether the context-menu button is visible or not.

true | false | 1 | 0

width

Mixed

Demo

Sets the width of the object.

10 | "20px" | 0.3 | "30%" | ...

wrap-text wrapText

Boolean

Demo

Sets whether the text will wrap, depending on the width of the object.

true | false | 1 | 0

x

Mixed

Demo

Sets the X position of the object. The context-menu gear object must be positioned separately.

10 | "20px" | 0.3 | "30%" | ...

y

Mixed

Demo

Sets the Y position of the object. The context-menu gear object must be positioned separately.

10 | "20px" | 0.3 | "30%" | ...