ZingChart Logo
Main Menu

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

Controls chart animation on initialization and refresh. When using effects, methods, and sequences, you can use the numeric code or string name. When using the string name, remember that you must prefix the string with "ANIMATION_" (e.g. "ANIMATION_BACK_EASE_OUT"). Refer to the Animation Tutorial for more information.

Attribute Type Info
delay Numeric

Sets the delay in milliseconds between each step of the animation.

5 | 10 | ...

effect Numeric

Sets the type of animation effect.

Numeric Code String Name
1 ANIMATION_FADE_IN
2 ANIMATION_EXPAND_VERTICAL
3 ANIMATION_EXPAND_TOP
4 ANIMATION_EXPAND_BOTTOM
5 ANIMATION_EXPAND_LEFT
6 ANIMATION_EXPAND_RIGHT
7 ANIMATION_EXPAND_HORIZONTAL
8 ANIMATION_SLIDE_LEFT
9 ANIMATION_SLIDE_RIGHT
10 ANIMATION_SLIDE_TOP
11 ANIMATION_SLIDE_BOTTOM
12 ANIMATION_UNFOLD_HORIZONTAL
13 ANIMATION_UNFOLD_VERTICAL

ANIMATION_FADE_IN | ANIMATION_EXPAND_VERTICAL | 1 | 2 | ...

method Numeric

Sets the method used for each animation effect.

Numeric Code String Name
0 ANIMATION_LINEAR
1 ANIMATION_BACK_EASE_OUT
2 ANIMATION_ELASTIC_EASE_OUT
3 ANIMATION_BOUNCE_EASE_OUT
4 ANIMATION_STRONG_EASE_OUT
5 ANIMATION_REGULAR_EASE_OUT

ANIMATION_LINEAR | ANIMATION_BACK_EASE_OUT | 0 | 1 | ...

on-change
onChange
Boolean

Determines whether or not animation occurs when a change is made to the chart via an API event (e.g., adding node, adding plot, removing node).

true (default) | false | 1 | 0

on-legend-toggle
onLegendToggle
Boolean

Determines whether or not animation occurs when users toggle legend items on and off. Note that in the "legend" object, the "toggle-action" attribute must be set to "remove".

true (default) | false | 1 | 0

sequence Numeric

Determines animation groups.

Numeric Code String Name
0 ANIMATION_NO_SEQUENCE
1 ANIMATION_BY_PLOT
2 ANIMATION_BY_NODE
3 ANIMATION_BY_PLOT_AND_NODE

ANIMATION_NO_SEQUENCE | ANIMATION_BY_PLOT | 0 | 1 | ...

speed Numeric

Sets the length of the animation in milliseconds.

String Name Equivalent Speed
(in Milliseconds)
ANIMATION_SLOW 4000
ANIMATION_FAST 1000

ANIMATION_SLOW | ANIMATION_FAST | 1000 | 4000 | ...

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