JSON Configuration

{
  "globals": {},
  "gui": {
    "behaviors": [{}],
    "context-menu": {
      "button": {},
      "custom-items": [{}],
      "gear": {},
      "item": {}
    }
  },
  "graphset": [{
    "3d-aspect": {},
    "arrows": [{
      "from": {},
      "to": {}
    }],
    "crosshair-x": {
      "marker": {},
      "plot-label": {},
      "scale-label": {}
    },
    "crosshair-y": {
      "scale-label": {}
    },
    "csv": {},
    "images": [{}],
    "labels": [{
      "callout-tip": {}
    }],
    "legend": {
      "footer": {},
      "header": {},
      "icon": {},
      "item": {},
      "item-off": {},
      "marker": {},
      "page-off": {},
      "page-on": {},
      "page-status": {},
      "scroll": {
        "bar": {},
        "handle": {}
      },
      "tooltip": {}
    },
    "media-rules": [{}],
    "no-data": {},
    "options": {
      "context-menu": {
        "button": {},
        "items": {}
      },
      "indicator": {
        "npv": {},
        "title": {},
        "value": {}
      },
      "style": {
        "hover-state": {},
        "tooltip": {}
      },
      "words": []
    },
    "plot": {
      "animation": {},
      "background-marker": {},
      "background-state": {},
      "error": {
        "hover-state": {}
      },
      "errors": [],
      "goal": {},
      "guide-label": {},
      "highlight-marker": {},
      "highlight-state": {},
      "hover-marker": {},
      "hover-state": {},
      "legend-item": {},
      "legend-marker": {},
      "marker": {},
      "preview": {},
      "rules": [{}],
      "selected-marker": {},
      "selected-state": {},
      "tooltip": {},
      "trend-down": {},
      "trend-equal": {},
      "trend-up": {},
      "value-box": {
        "connector": {},
        "joined": {},
        "shared": {}
      }
    },
    "plotarea": {},
    "preview": {
      "active": {},
      "handle": {},
      "handle-bottom": {},
      "handle-left": {},
      "handle-right": {},
      "handle-top": {},
      "mask": {}
    },
    "scale": {},
    "scale-k": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "tick": {},
      "tooltip": {}
    },
    "scale-r": {
      "center": {},
      "guide": {},
      "item": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ring": {
        "items": [{}]
      },
      "tick": {}
    },
    "scale-v": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "ref-line": {},
      "tick": {},
      "tooltip": {}
    },
    "scale-x": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "label": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ref-line": {},
      "rules": [{}],
      "tick": {},
      "tooltip": {},
      "transform": {
        "guide": {},
        "item": {}
      }
    },
    "scale-y": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "label": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ref-line": {},
      "rules": [{}],
      "tick": {},
      "tooltip": {},
      "transform": {}
    },
    "scroll-x": {
      "bar": {},
      "handle": {}
    },
    "scroll-y": {
      "bar": {},
      "handle": {}
    },
    "series": [{
      "animation": {},
      "background-marker": {},
      "background-state": {},
      "error": {},
      "errors": [],
      "goal": {},
      "guide-label": {},
      "highlight-marker": {},
      "highlight-state": {},
      "hover-marker": {},
      "hover-state": {},
      "legend-item": {},
      "legend-marker": {},
      "marker": {},
      "preview": {},
      "rules": {},
      "selected-marker": {},
      "selected-state": {},
      "tooltip": {},
      "trend-down": {},
      "trend-equal": {},
      "trend-up": {},
      "value-box": {},
      "values": []
    }],
    "shapes": [{
      "label": {}
    }],
    "source": {},
    "subtitle": {},
    "title": {},
    "tooltip": {},
    "widgets": [],
    "zoom": {
      "label": {}
    }
  }],
  "history": {
    "item": {},
    "item-off": {}
  },
  "refresh": {
    "curtain": {}
  }
}

 Back to Docs  Back to JSON Attributes Tree

To style how unselected (or background) data points appear. Depending on the chart type, this object is used with or in lieu of the "background-state" object. Refer to the Plot/Series Styling Tutorial for more information.

Note: You must add a "selection-mode" attribute to the "plot" object. Set the value to "multiple", "plot", or "graph". The default value is "none".

Attribute Type Info
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 | ...

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.

"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. See also line-width for closed shapes.

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

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

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

size Mixed

Sets the size of the object/shape.

4 | "6px" | ...

type String

Sets the type of the object/shape.

"pie" | "circle" | "star5" | ...

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

Chart View Code View
Edit This Chart Share This Chart Start a FREE Trial
JS JSON