arrows

[ root » graph » arrows ]

Creates a container to hold any number of chart arrow objects, which are great for drawing attention to a specific area of your chart.

AttributeTypeInfo

font-angle fontAngle

Numeric

Demo

Sets the text's font angle.

-45 | 115 | ...

font-color fontColor

String

Demo

Sets the text's color. Similar to color.

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

font-family fontFamily

String

Demo

Sets the text's font family.

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

font-size fontSize

Mixed

Demo

Sets the arrow's label font size.

4 | "6px" | ...

from

Object

Demo

Specifies the point at which the arrow will begin. To be used with to.

See from.

text

String

Demo

Text displayed in a label over the arrow.

"Upturn" | "10% decrease" | ...

to

Object

Demo

Specifies the point at which the arrow will end. To be used with from.

See to.

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

aspect

Array

Demo

Sets the arrow head width and head height. The first numeric entry in the array sets the head width and the second entry sets the head height.

[...]

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-color-1 backgroundColor1

String

Demo

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

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

background-color-2 backgroundColor2

String

Demo

Sets the second color of a 2 color background gradient of the object. To be used with background-color-1.

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

direction

String

Demo

Sets the direction of the arrow

"top" | "bottom" | "left" | "right"

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

length

Numeric

Demo

Sets the length of the arrow.

50 | 100 | ...

line-style lineStyle

String

Demo

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

"solid" | "dotted" | "dashed"

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

rules

Array

Rules allows you to include logic within your JSON code to apply sets of attributes to certain aspects of your chart that meet a specified requirement. See rules for usage information.

[...]

shadow

Boolean

Demo

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

Has limited effect on HTML5 implementation.

true | false | 1 | 0

shadow-alpha shadowAlpha

Numeric

Demo

Sets the transparency of the shadow 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 | ...

shadow-angle shadowAngle

Numeric

Demo

Sets the angle of the shadow underneath the object.

-45 | 115 | ...

shadow-blur shadowBlur

Mixed

Demo

Sets the blur effect size for the shadow of the object.

Has limited effect on HTML5 implementation.

4 | "6px" | ...

shadow-color shadowColor

String

Demo

Sets the color of the shadow of the object.

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

shadow-distance shadowDistance

Mixed

Demo

Sets the distance between the shadow and the object.

4 | "6px" | ...

size

Mixed

Demo

Sets the size of the object/shape.

4 | "6px" | ...

visible

Boolean

Demo

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

true | false | 1 | 0