images
[ root » graph » images ]
Creates a container to hold any number of chart image objects. Images can be styled and placed anywhere on a chart.
| Attribute | Type | Info |
|---|---|---|
src | String | Sets the image source. Source can be the path to a local image file or a web image's location. Acceptable file formats include PNG, GIF, JPEG, and TIFF. |
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 "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 "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 "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 "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 "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 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 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 "#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 "0.1 0.5 0.9" | ... |
height | Mixed | Sets the object's height. 10 | "20px" | 0.3 | "30%" | ... |
line-gap-size lineGapSize | Mixed | Can be used to create custom dashed or dotted lines when used with 4 | "6px" | ... |
line-segment-size lineSegmentSize | Mixed | Can be used to create custom dashed or dotted lines when used with 4 | "6px" | ... |
line-style lineStyle | String | Sets the style applied to lines and borders of the object. "solid" | "dotted" | "dashed" |
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 |
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 | ... |