plotarea

[ root » graph » plotarea ]

Allows you to style the plotarea, which is the area directly behind a chart's plotted data. This area is delimited by the ends of the X and Y scales. To style the area outside of the scales, place the styling attributes within the main graph object. (See graphset.)

AttributeTypeInfo

adjust-layout adjustLayout

Boolean

If true, it is similar with setting margin:"dynamic", added with adjust-layout attributes on title and legend.

true | false | 1 | 0

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

0.3 | 0.9 | ...

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-bottom borderBottom

String

Sets the object's bottom border style. Accepts solid, dashed, and dotted styles.

"2px solid #f00" | ...

border-color borderColor

String

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-left borderLeft

String

Sets the object's left border style. Accepts solid, dashed, and dotted styles.

"2px solid #f00" | ...

border-radius borderRadius

Mixed

Sets the object's border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A single value will affect all 4 corners, while multiple values will have separate effects on each corner, with the first value affecting the top-left corner, the second value affecting the top-right corner, and so on, in a clockwise direction. A negative value will cut a corner off without rounding.

4 | "6px" | "6px 10px 3px 5px" | "-10px" | ...

border-radius-bottom-left borderRadiusBottomLeft

Mixed

Sets the object's bottom-left border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding.

4 | "6px" | "-6px" | -4 | ...

border-radius-bottom-right borderRadiusBottomRight

Mixed

Sets the object's bottom-right border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding.

4 | "6px" | "-6px" | -4 | ...

border-radius-top-left borderRadiusTopLeft

Mixed

Sets the object's top-left border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding.

4 | "6px" | "-6px" | -4 | ...

border-radius-top-right borderRadiusTopRight

Mixed

Sets the object's top-right border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding.

4 | "6px" | "-6px" | -4 | ...

border-right borderRight

String

Sets the object's right border style. Accepts solid, dashed, and dotted styles.

"2px solid #f00" | ...

border-top borderTop

String

Sets the object's top border style. Values must include the border width, style, and color. Accepts solid, dashed, and dotted styles.

"2px solid #f00" | ...

border-width borderWidth

Mixed

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

4 | "6px" | ...

callout

Boolean

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

true | false | 1 | 0

callout-extension calloutExtension

Mixed

Sets the length of the extension that extends beyond the tip of the callout arrow.

4 | "6px" | ...

callout-height calloutHeight

Mixed

Sets the height of the object's callout arrow. A larger value will create a taller callout arrow.

4 | "6px" | ...

callout-hook calloutHook

Array

Sets the point of the tip of the callout arrow to a specified coordinate on the chart, with the starting point of [0,0] being the top left corner of the chart.

[200, 50] | ...

callout-offset calloutOffset

Mixed

Sets the offset along the callout direction of the arrow's base. Positive and negative values can be used to offset the callout arrow up, down, left, or right depending on the callout-position.

4 | "6px" | ...

callout-position calloutPosition

String

Sets the position for the object's callout arrow. The position is "bottom" by default.

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

callout-width calloutWidth

Mixed

Sets the width of the object's callout arrow. A larger value will create a wider callout arrow.

4 | "6px" | ...

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

4 | "6px" | ...

fill-offset-y fillOffsetY

Mixed

Sets an Y offset to apply to the fill.

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 consisting of 2 or more colors. To be used with gradient-stops.

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

gradient-stops gradientStops

String

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

height

Mixed

Sets the object's height.

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

item

String

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

"itemid" | ...

map

String

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

"mapid" | ...

margin

Mixed

Sets the object's margin/s. The plotarea object also accepts "dynamic" as value for the margin attribute, in which case it analyzes the scale labels and change the plotarea size accordingly in order to fit all scale labels.

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

margin-bottom marginBottom

Mixed

Sets the object's top margin. The plotarea object also accepts "dynamic" as value for the margin attribute, in which case it analyzes the scale labels and change the plotarea size accordingly in order to fit all scale labels.

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

margin-left marginLeft

Mixed

Sets the object's top margin. The plotarea object also accepts "dynamic" as value for the margin attribute, in which case it analyzes the scale labels and change the plotarea size accordingly in order to fit all scale labels.

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

margin-right marginRight

Mixed

Sets the object's top margin. The plotarea object also accepts "dynamic" as value for the margin attribute, in which case it analyzes the scale labels and change the plotarea size accordingly in order to fit all scale labels.

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

margin-top marginTop

Mixed

Sets the object's top margin. The plotarea object also accepts "dynamic" as value for the margin attribute, in which case it analyzes the scale labels and change the plotarea size accordingly in order to fit all scale labels.

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

margin-bottom-offset marginBottomOffset

Mixed

Sets an additional margin specifically to the bottom of the plotarea when using dynamic margins. Offset will only be set if there is a scale object on the bottom of the chart.

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

margin-left-offset marginLeftOffset

Mixed

Sets an additional margin specifically to the left of the plotarea when using dynamic margins. Offset will only be set if there is a scale object on the left of the chart.

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

margin-right-offset marginRightOffset

Mixed

Sets an additional margin specifically to the left of the plotarea when using dynamic margins. Offset will only be set if there is a scale object on the right of the chart.

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

margin-top-offset marginTopOffset

Mixed

Sets an additional margin specifically to the top of the plotarea when using dynamic margins. Offset will only be set if there is a scale object on the top of the chart.

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

mask-tolerance maskTolerance

Numeric

Sets the tolerance of the mask (in number of pixels) that covers the plotarea to allow objects to overflow outside of the plotarea.

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

position

String

Sets the object's position relative to it's container. Similar results can be obtained by setting marginand margin-... attributes.

shadow

Boolean

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

Has limited effect on HTML5 implementation.

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

visible

Boolean

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

true | false | 1 | 0

width

Mixed

Sets the object's width.

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

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