shapes

[ root » graph » shapes ]

An array that contains objects defining chart shapes. Shapes can be styled and placed anywhere on a chart.

AttributeTypeInfo

angle-end angleEnd

Numeric

Sets the end angle of a pie shape.

"10" | "212" | ...

angle-start angleStart

Numeric

Sets the beginning angle of a pie shape.

"10" | "212" | ...

height

Numeric

Sets the height of the shape

"10" | "212" | ...

hover-state hoverState

Object

Customize shape behavior when a user hovers over it.

id

String

Id of the shape

"myShape" | "Square2" | ...

label

Object

Add a label to the shape.

slice

Numeric

Sets the radius of the inner ring of a pie shape.

"10" | "42" | ...

width

Numeric

Sets the width of the shape

"10" | "212" | ...

alpha

Numeric

Sets the transparency of the object. The higher the value, the less transparent the object appears. Value ranges from 0.1 to 1 Requires the formatting 0.x

0.3 | 0.9 | ...

angle

Numeric

Sets the rotation angle of the object/shape.

-45 | 115 | ...

background-color backgroundColor

String

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

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

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

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

"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 value is no-repeat.

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

background-repeat backgroundRepeat

String

Sets the repeating mode for the background image.

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

border-color borderColor

String

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

"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. Defaults to black when border-color is not defined. See also line-width for closed shapes.

4 | "6px" | ...

fill-angle fillAngle

Numeric

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

-45 | 115 | ...

fill-offset-x fillOffsetX

Mixed

Sets an X offset to apply to the fill. Positive value moves the offset right.

4 | "6px" | ...

fill-offset-y fillOffsetY

Mixed

Sets a Y offset to apply to the fill. With a radial fill, positive value moves the offset down. With a linear fill, affects location of the gradient stop.

4 | "6px" | ...

fill-type fillType

String

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

"linear" | "radial"

gradient-colors gradientColors

String

Sets a set of colors for a complex background gradient (more than 2 colors) of the object. Used with gradient stops.

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

gradient-stops gradientStops

String

Sets a set of steps corresponding for each color for a complex background gradient (more than 2 colors) of the object. Paired with gradient-colors.

"0.1 0.5 0.9" | ...

item

String

Sets the item id of the map on which the object/shape is being added.

"itemid" | ...

line-color lineColor

String

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

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

line-gap-size lineGapSize

Mixed

Can be used to create custom dashed or dotted lines when used with line-segment-size. This will control the size of the gaps between each line segment.

4 | "6px" | ...

line-segment-size lineSegmentSize

Mixed

Can be used to create custom dashed or dotted lines when used with line-gap-size. This will control the size of the visible segment of line.

4 | "6px" | ...

line-style lineStyle

String

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

"solid" | "dotted" | "dashed"

line-width lineWidth

Mixed

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

4 | "6px" | ...

map

String

Sets the map id of the map on which the object/shape is being added.

"mapid" | ...

offset-r offsetR

Mixed

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

4 | "6px" | ...

offset-x offsetX

Mixed

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

4 | "6px" | ...

offset-y offsetY

Mixed

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

4 | "6px" | ...

points

Array

Sets the coordinates of the object/shape points.

[ [10,10], [10,20], [20,20], [20,10], [10,10] ] | ...

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

Sets whether the object gets a shadow or not.

true | false | 1 | 0

shadow-alpha shadowAlpha

Numeric

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

Sets the angle of the shadow underneath the object.

-45 | 115 | ...

shadow-blur shadowBlur

Mixed

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

Has limited effect on HTML5 implementation.

4 | "6px" | ...

shadow-color shadowColor

String

Sets the color of the shadow of the object.

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

shadow-distance shadowDistance

Mixed

Sets the distance between the shadow and the object.

4 | "6px" | ...

size

Mixed

Sets the size of the object/shape.

4 | "6px" | ...

type

String

Sets the type of the object/shape.

"rect" | "circle" | "star5" | "star9" | "square" | "diamond" | "triangle" | "plus" | "cross" | "line" | "poly" | "pie" | ...

visible

Boolean

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

true | false | 1 | 0

x

Mixed

Sets the X position of the object.

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

y

Mixed

Sets the Y position of the object.

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

z-index zIndex

Numeric

Sets the z position of the object. Objects with higher z indexes will appear "above" those with lower z index values.

5 | 10 | ...