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 use with crosshair plot labels. When you have multiple series in your chart, you may want to separate the crosshair plot labels so that a label appears for each series. To do this, in "crosshair-x", in the "plot-label" object, you must add a "multiple" attribute and set the value to true. You can then create"guide-label" objects in individual "series" objects to specify how the text and styling for individual plot labels appear. Refer to the Crosshairs Tutorial for more information

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. Note that values require the leading 0 before the decimal point. Use with "background-color" attribute.

0.3 | 0.4 | 0.9 | ...

background-color
backgroundColor
String

Sets the background color of the object. Colors can be entered by name (e.g., "purple", "blue"), hexadecimal notation (e.g., "#FF0000", "#0000FF"), or RGB notation (e.g., "rgb(255,0,0)", "rgb(0,0,255)").

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

border-color
borderColor
String

Sets the border color of the object.

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

border-width
borderWidth
Numeric

Sets the border width of the object.

4 | "6px" | ...

font-color
fontColor
String

Sets the font color of the object.

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

font-family
fontFamily
String

Sets the font family of the object.

"Arial" | "Tahoma,Verdana" | ...

font-size
fontSize
String

Sets the font size of the object.

4 | "6px" | ...

font-style
fontStyle
String

Sets the font style of the object.

"none" | "italic"

font-weight
fontWeight
String

Sets the font weight of the object.

"none" | "bold"

line-style
lineStyle
String

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

"solid" | "dotted" | "dashed" | "dashdot"

padding Mixed

Sets the padding around the text of the object.

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

sticky Boolean

To create sticky crosshair labels. Use this with the "timeout" attribute, which allows you to specify how long you want the labels to "stick" to the chart. Refer to the Crosshairs Tutorial for more information.

true | false | 1 |0

text String

Sets the crosshair plot label text to be displayed for that series. You can provide any combination of alphanumeric characters and/or ZingChart tokens.

"%v widgets" | "Top Sales: %v" | "$%v" | "%v %t" | "..."

timeout Numeric

To create sticky crosshair labels. Provide a value in milliseconds. Use this with the "sticky" attribute, which specifies whether or not labels will "stick" to the chart. Refer to the Crosshairs Tutorial for more information.

30000 | 10000 | ...

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

To create fixed crosshair labels. This attribute specifies the "x" position of your label, and can be used with the "y" attribute to specify the "y" position. Refer to the Crosshairs Tutorial for more information.

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

y Mixed

To create fixed crosshair labels. This attribute specifies the "y" position of your label, and can be used with the "x" attribute to specify the "x" position. Refer to the Crosshairs Tutorial for more information.

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

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