gear

[ root » gui » context-menu » gear ]

Use the gear object to style the appearance of the context menu button. Note that in the contextMenuobject, you must include a button object with 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 | ...

angle

Numeric

Demo

Sets the rotation angle of the object/shape.

-45 | 115 | ...

background-color backgroundColor

String

Demo

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

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-fit backgroundFit

String

Demo

Sets the direction/s on which the background image is being "stretched".

"x" | "y" | "xy"

background-image backgroundImage

String

Demo

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

Demo

Sets the position of the background when the background-repeat value is no-repeat.

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

background-repeat backgroundRepeat

String

Demo

Sets the repeating mode for the background image.

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

border-color borderColor

String

Demo

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

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

border-width borderWidth

Mixed

Demo

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

4 | "6px" | ...

fill-angle fillAngle

Numeric

Demo

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

-45 | 115 | ...

fill-offset-x fillOffsetX

Mixed

Demo

Sets an X offset to apply to the fill.

4 | "6px" | ...

fill-offset-y fillOffsetY

Mixed

Demo

Sets an Y offset to apply to the fill.

4 | "6px" | ...

fill-type fillType

String

Demo

Sets the background gradient fill type to either linear or radial.

"linear" | "radial"

gradient-colors gradientColors

String

Demo

Sets a set of colors for a complex background gradient consisting of 2 or more colors. To be used with gradient-stops.

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

gradient-stops gradientStops

String

Demo

Sets the gradient stops for a complex background gradient consisting of 2 or more colors. To be used with gradient-colors.

"0.1 0.5 0.9" | ...

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

size

Mixed

Demo

Sets the size of the object/shape.

4 | "6px" | ...

type

String

Demo

Sets the type of icon displayed on mobile devices to tap to bring up the drop-down menu. gear4 can be specified, this means that the gear icon shown will have four sprockets protruding from it. Gears can range from 3-9. star4 has 4 points, while star9 has 9 points. Stars can range from 3-9 also.

"gear4" | "gear9" | "star4" | "star9" | ...

x

Mixed

Demo

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

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

y

Mixed

Demo

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

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