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

Use the series object to provide your data values and to make local changes to a specific data set. (Use the plot object to make global changes that apply to all data sets.)

Attribute Type Info
active-area
activeArea
Boolean

Area and Radar Charts Only: Extends the activation area by allowing tooltips and API events to be triggered by the area under a line. Refer to the Area Chart Tutorial for more information.

true | false | 1 | 0

alpha Numeric

Sets the transparency level of backgrounds, borders, and lines. Values must range between 0.0 and 1.0, with 0.0 being completely transparent and 1.0 being completely opaque. Note that values require the leading zero before the decimal point.

0.3 | 0.9 | ...

alpha-area
alphaArea
Numeric

Area Charts Only: Sets the transparency level of the area below a line. Refer to the Area Chart Tutorial for more information. Values must range between 0.0 and 1.0, with 0.0 being completely transparent and 1.0 being completely opaque. Note that values require the leading zero before the decimal point.

0.3 | 0.9 | ...

animation Object

Sets and customizes the animation used on chart load and reload. Refer to the Animation Tutorial for more information.

{...}

aspect String

Modifies how data points appear on a chart. Refer to the applicable chart types page for more information.

Options by Chart Type:

Areasegmented | spline | stepped
Bar/Columnbar | cone | histogram | cylinder (3-D only) | pyramid (3-D only)
Bulletbar | cone | histogram
Heat Mapbrightness | size | vertical | horizontal | none
Linesegmented | spline | stepped | jumped
Radarline | area | rose (or column or bar) | scatter | mixed
Rangesegmented | spline
Stockcandlestick | whisker

"segmented" | "spline" | "stepped" | "jumped" | "cone" | "histogram" | ...

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-marker
backgroundMarker
Object

Allows you to set marker styling attributes for non-selected (or background) data points. This object may be used in conjunction with the "background-state" object, depending on the chart type. You can also style the selected data points using the "selected-state" and/or "selected-marker" object(s). Refer to the Plot/Series Styling Tutorial for more information.

Note: The "selection-mode" attribute must be included for styling to activate. You can also add a "background-mode" attribute to set whether non-selected data points activate per plot or graph.

{...}

background-mode
backgroundMode
String

To be used with the "selection-mode" attribute. It allows you to set whether non-selected data points activate per plot (default) or graph.

Note: Use this attribute with the "background-state" and/or "background-marker" object(s), which allow you specify the styling attributes you want applied. Refer to the Plot/Series Styling Tutorial for more information.

"plot" (default) | "graph"

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"

background-state
backgroundState
Object

Allows you to set styling attributes for non-selected (or background) data points. This object may be used in conjunction with the "background-marker" object, depending on the chart type. You can also style the selected data points using the "selected-state" and/or "selected-marker" object(s). Refer to the Plot/Series Styling Tutorial for more information.

Note: The "selection-mode" attribute must be included for styling to activate. You can also add a "background-mode" attribute to set whether non-selected data points activate per plot or graph.

{...}

band-space
bandSpace
Numeric

Nested Pie Charts Only: This attribute is used to set the space between band in nested pie charts ("type":"nestedpie").

5 | 10 | ...

bar-space
barSpace
Numeric

Bar Charts and Bullet Charts Only: Sets the amount of space between each bar in a single plot index.

"10" | "10%" | "10px"

bar-width
barWidth
Numeric

Bar Charts and Bullet Charts Only: Sets the width of each bar.

"10" | "10%" | "10px"

bars-overlap
barsOverlap
Numeric

Bar Charts and Bullet Charts Only: Defines how much the bars in each plot index should overlap.

"10" | "10%" | "10px"

bars-space-left
barsSpaceLeft
Numeric

Bar Charts and Bullet Charts Only: Defines the spacing to the left of the bars at each index position.

"10" | "10%" | "10px"

bars-space-right
barsSpaceRight
Numeric

Bar Charts and Bullet Charts Only: Defines the spacing to the right of the bars at each index position.

"10" | "10%" | "10px"

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

contour-on-top
contourOnTop
Boolean

Area Charts Only: Sets whether the contour lines on area plots will be on top of all areas or will be hidden by the next area plot on top of it. You will notice when the attribute is set to true the lines are all set above the shaded regions.

true | false | 1 | 0

connect-nulls
connectNulls
Boolean

By defalut null values within series arrays will create a blank space within a plot. Setting connect-nulls to true will connect values through a null data point.

true | false | 1 | 0

csize Numeric

Angular Gauge Charts Only: To modify the width of the needle indicator. (Use the "size" attribute to modify the needle indicator length.) Refer to the Angular Gauge Chart Tutorial for more information.

10 | "10%" | 10px

cursor String

Sets the style of the cursor when hovering over a node.

"hand" | "normal"

data-... String

This attribute allows you to create custom tokens and associate static or dynamic data to them. This attribute can be used almost anywhere in a chart.

"Some Text" | ...

data-dragging
dataDragging
Boolean

This attribute allows you to click and drag a bar's height in a bar chart.

true | false | 1 | 0

decimals Numeric

Using the decimals attribute will allow you to set the number of decimal places associated to each value.

5 | 10 | ...

decimals-separator
decimalsSeparator
String

The "decimals-separator": attribute allows you to set what type of punctuation the will be used in the decimal place.

"." | "," | ...

description String

This attribute sets description text for the plot which can be addressed in various areas with the %plot-description token.

"Some Text" | ...

detach Boolean

Pie Charts Only: To disable the detaching of clicked pie slices. Refer to the Pie Chart Tutorial for more information.

true | false | 1 | 0

detached Boolean

Pie Charts Only: To set whether or not the pie slice(s) is detached when the chart loads. Clicking the detached slice will reattach it to the pie. Note that it differs from the "offset-r" attribute, which does not reattach itself back to the pie. Refer to the Pie Chart Tutorial for more information.

true | false | 1 | 0

error Object

Error Bars Only: To set the styling of the error bars. (Error bar values are set with the "errors" array. Refer to the Error Bars Tutorial for more information.

{...}

errors Array

Error Bars Only: An array of items specifying the value of error bars for items in the plot. Error can be specified using a specific max error and min error respectively, or both at once. Note errors can be set for all plot indexes within the "plot":{} object or they can be set within each series value set. Refer to the Error Bars Tutorial for more information.

[...]

exact Boolean

By default ZingChart uses sampling when rendering charts. This helps improve rendering speeds and typically does not effect the appearance of the chart. However, using the attribute "exact":true within the "plot":{ } object forces ZingChart to render all nodes.

true | false | 1 | 0

exponent Boolean

This attribute sets the values to scientific notation

true | false | 1 | 0

exponent-decimals
exponentDecimals
Numeric

This attribute set the number of decimals to be used when using exponents for scientific notation

5 | 10 | ...

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"

goal Object

Bullet Charts Only: To set the styling of the goals in bullet charts. Refer to the Bullet Charts Tutorial for more information.

{...}

goals Array

Bullet Charts Only: Accepts numerical values. Determines where goals are set for all plots. The "goals":[ ] values can also be set individually within each value set.

[45, 70, 60]

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

group-selections
groupSelections
Boolean

When true, automatically selects all nodes with the same scale index as the selected node. The selection-mode attribute must also be set.

true | false | 1 | 0

guide-label
guideLabel
Object

To use with crosshair plot labels, when the "multiple" attribute is set to true. Add the "guide-label" object to individual series objects, where you can specify the text and styling for each plot label.

{...}

highlight Boolean

When set to true, it highlights the corresponding series when the user hovers over it in the legend.

Note: This attribute may be used in conjunction with the "highlight-state" and/or "highlight-marker" object(s), which allow for custom styling. Refer to the Plot/Series Styling Tutorial for more information.

true | false | 1 | 0

highlight-marker
highlightMarker
Object

Allows you to set marker styling attributes, which are triggered when the user hovers over the corresponding series in the legend. This object may be used in conjunction with the "highlight-state" object, depending on the chart type. Refer to the Plot/Series Styling Tutorial for more information.

Note: The "highlight" attribute in "plot" object or the "highlight-marker" attribute in "legend" object must be set to true for styling to activate.

{...}

highlight-state
highlightState
Object

Allows you to set styling attributes, which are triggered when the user hovers over the corresponding series in the legend. This object may be used in conjunction with the "highlight-marker" object, depending on the chart type. Refer to the Plot/Series Styling Tutorial for more information.

Note: The "highlight" attribute in "plot" object or the "highlight-marker" attribute in "legend" object must be set to true for styling to activate.

{...}

hover-marker
hoverMarker
Object

Allows you to set styling attributes, which are triggered when the user hovers over the data points (or nodes) on the chart. This object may be used in conjunction with the "hover-state" object, depending on the chart type. Refer to the Plot/Series Styling Tutorial for more information.

Note: The "hover-mode" attribute may be used to set whether hover styling activates per node or plot.

{...}

hover-mode
hoverMode
String

To specify whether data points that are hovered over activate per node (default) or plot.

Note: Use this attribute with the "hover-state" and/or "hover-marker" object(s), which allow you specify the styling attributes you want applied. Refer to the Plot/Series Styling Tutorial for more information.

"node" (default) | "plot"

hover-state
hoverState
Object

Allows you to set styling attributes, which are triggered when the user hovers over the data points (or nodes) on the chart. This object may be used in conjunction with the "hover-marker" object, depending on the chart type. Refer to the Plot/Series Styling Tutorial for more information.

Note: The "hover-mode" attribute may be used to set whether hover styling activates per node or plot.

{...}

join Array

Venn Diagrams Only: This attribute allow you to set the values for the area to be shared between each node.

[30]

layout String

Pie Charts Only: To automatically order the pie slices by size and to set the reference (starting) angle to zero (12 o'clock position). Refer to the Pie Chart Tutorial for more information.

"auto"

legend-item
legendItem
Object

The "legend-item":{ } object allows you to style and manipulate the text for each legend item.

{...}

legend-marker
legendMarker
Object

The "legend-marker":{ } object allows you to style the markers on the legend.

{...}

legend-text
legendText
String

The "legend-text": attribute is typically used within "series":[ ] value sets. Using this attribute allows you to associate both a "text":" " and "legend-text":" " to each value set

"Some Text" | ...

line-color
lineColor
String

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

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

line-gap-size
lineGapSize
Mixed

Can be used to create custom dashed or dotted lines when used with "line-segment-size". This will control the size of the gaps between each line segment.

4 | "6px" | ...

line-segment-size
lineSegmentSize
Mixed

Can be used to create custom dashed or dotted lines when used with "line-gap-size". This will control the size of the visible segment of line.

4 | "6px" | ...

line-style
lineStyle
String

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

"solid" | "dotted" | "dashed"

line-width
lineWidth
Mixed

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

4 | "6px" | ...

marker Object

Using the "marker":{ } within "plot":{ } allows you to style markers associated to all plots. You can also use "marker":{ } within individual "series":[ ] values to style each value set individually.

{...}

max-nodes
maxNodes
Numeric

Applies to charts such as line and area which have markers. When there are too many markers for the chart ZingChart does not display all markers. Example 1000 nodes on a 300px wide chart. Setting max-nodes will override the default setting and force nodes to be displayed.

5 | 10 | ...

max-ratio
maxRatio
Numeric

Heat Maps Only: Sets a maximum ratio applied to the value of the node when calculating its aspect.

0 | 0.4 | ...

max-size
maxSize
Numeric

Bubble Charts and Bubble Pie Charts Only: Defines the maximum size of the bubble if the value representing size is not sharing the same ratio with the value scale.

5 | 10 | ...

max-trackers
maxTrackers
Numeric

Sets the maximum numbers of nodes for which a tracking area will be created. This is best used to optimize charts with large sets of data.

5 | 10 | ...

mid-point
midPoint
Boolean

Sets whether or not a node is wrapped equally before and after its position.

true | false | 1 | 0

min-ratio
minRatio
Numeric

Heat Maps Only: Sets a minimum ratio applied to the value of the node when calculating its aspect.

0 | 0.4 | ...

min-size
minSize
Numeric

Bubble Charts and Bubble Pie Charts Only: Defines the minimum size of the bubble if the value representing size is not sharing the same ratio with the value scale.

5 | 10 | ...

monotone Boolean

Sets whether monotone interpolation is used for charts using the "spline" aspect.

true | false | 1 | 0

multiplier Boolean

Setting "multiplier":true will take large numbers such as thousands, millions, etc and replace the full number with an abbreviated notation with a short unit such as K, M, B, etc

true | false | 1 | 0

negation String

This attribute will determine how negative values are handled. When using "format":"$%v" setting "negation":"currency" will move the - symbol to the outside of the $ sign. When using "negation" within the "plot":{ } object you will see changes in things such as tooltips or anywhere else series data is used to populate values. You need to set "negation" in things such as "scale-y":{ } separately.

"standard" | "currency"

offset-r
offsetR
Numeric

Pie Charts Only: Often used to create an exploded pie chart, the attribute allows you to pull out one or more slices from a pie chart. Note that it differs from the "detached" attribute, which reattaches the slice back to the pie when clicked on. Refer to the Pie Chart Tutorial for more information.

5 | 10 | "5%" | ...

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

preview Boolean

Sets whether or not a series will be visible inside of the preview window.

true | false | 1 | 0

preview Object

Stock Charts with Preview Charts Only: Use this object to style the "chart" portion of your preview chart. The preview chart displays as an area or line chart type, and you can style the lines, markers, and backgrounds. Refer to the Stock Chart Tutorial for more information.

{...}

preview-state Object

Bar, Line and Area Charts only Include object in any series to override style displayed in the preview window.

{...}

ref-angle
refAngle
Numeric

Pie Charts Only: Provides the ability to rotate the chart.

5 | 10 | ...

reference String

Heat Maps Only: Sets the value (default 'plot-max') which is used as a reference for calculating node aspect.

"plot-max" | "plot-total" | "chart-max" | "chart-total"

rules Array

Rules allows you to include logic within your JSON code. You can format and style your value boxes based on specified conditions. Refer to the Logic Rules Tutorial for more information.

[...]

sampling-step
samplingStep
Numeric

By default ZingChart uses sampling when rendering large datasets. If you are trying to render 10000 data points on a chart which is only 500px wide there is not enough space for each data point. ZingChart will automatically determine which data points to show. The "sampling-step": attribute allows you to set the step for sampling. For example if you have 10000 data points and set "sampling-step":10 it will show point 1,10,20,... Also note the "exact":true attribute if you want to force all data points.

5 | 10 | ...

scales String

Specifies the scales used by the series item.

scale-x,scale-y | scale-x,scale-y-2 | ...

scaling String

Bubble Charts and Bubble Pie Charts Only: Sets the method used to relate the bubble numerical value to it's aspect.

"radius" | "sqrt" | "area"

scroll-step-multiplier
scrollStepMultiplier
Numeric

When scrolling is enabled for a chart, ZingChart automatically samples the data in order to maintain performance during the re-rendering of the chart that occurs during scrolling. By default, ZingChart will automatically sample every other item (scroll-step-multiplier:2). Setting scroll-step-multiplier to 1 will force the library to sample every data point, essentially disabling sampling.

5 | 10 | ...

segment-trackers
segmentTrackers
Boolean

Line Charts and Area Charts Only: Allows you to specify whether tooltips are activated by the markers and lines (default) or the markers only.

true (default) | false

selected-marker
selectedMarker
Object

Allows you to set marker styling attributes, which are triggered when the user clicks on or selects data points on your chart. This object may be used in conjunction with the "selected-state" object, depending on the chart type. You can also style the unselected (or background) data points using the "background-state" and/or "background-marker" object(s). Refer to the Plot/Series Styling Tutorial for more information.

Note: The "selection-mode" attribute must be included for styling to activate.

{...}

selected-state
selectedState
Object

Allows you to set styling attributes, which are triggered when the user clicks on or selects data points on your chart. This object may be used in conjunction with the "selected-marker" object, depending on the chart type. You can also style the unselected (or background) data points using the "background-state" and/or "background-marker" object(s). Refer to the Plot/Series Styling Tutorial for more information.

Note: The "selection-mode" attribute must be included for styling to activate.

{...}

selection-mode
selectionMode
String

To set how data points are selected on a chart. "none" (default) prevents any selection. "plot" allows you to select one node (or data point) per series (or data set). "graph" allows you to select one node per chart. "multiple" allows you to select as many nodes as you want.

Note: Use this attribute with the "selected-state" and/or "selected-marker" object(s), which allow you specify the styling attributes you want applied. Refer to the Plot/Series Styling Tutorial for more information.

"none" (default) | "multiple" | plot" | "graph"

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

short Boolean

Setting "short":true will abbreviate long numbers such as 100000 to 1K or 1000000 to 1M. When set within the "plot":{} object this change will be noticed anywhere values are pulled from series data. This can also be used in places such as "scale-y, scale-x, etc"

true | false | 1 | 0

short-unit
shortUnit
String

By default when setting "short":true ZingChart will round to the nearest short unit (ie 100000 to 100K and 1000000 to 1M). You can set the short-unit and ZingChart will round all numbers to that unit. Note when setting this within the "plot":{ } object the changes will only effect values which are pulled from the series values. Things such as scale are set separately.

"k" | "K" | "m" | "M" | "b" | "B"

show-zero
showZero
Boolean

On bar charts, when the value of a bar is 0, setting `show-zero`: true will add 1 pixel to the height of the bar so that it is only just visible.

true | false | 1 | 0

size Numeric

Angular Gauge Charts Only: To modify the length of the needle indicator. (Use the "csize" attribute to modify the needle indicator width.) Refer to the Angular Gauge Chart Tutorial for more information.

10 | "10%" | 10px

size-factor
sizeFactor
Numeric

Bubble Charts and Bubble Pie Charts Only: Sets a multiplier (default 1) used to increase/decrease the bubble size

5 | 10 | ...

slice Numeric

Pie Charts Only: To create and/or specify the sizing of the donut ring. Provide a percentage or pixel value. Note that we have a donut chart type ("type": "ring"), where the donut ring size is set by default to 35%. This attribute can be used to adjust the sizing. Refer to the Pie Chart Tutorial for more information.

"35%" | 0.35 | 10 | ...

slice-start
sliceStart
Numeric

Nested Pie Charts Only: Sets the initial offset of the pie layers when making a nestedpie

5 | 10 | ...

stack Numeric

Using the "stack": attribute allows you to assign which plot index you want to each value set associated with when using a stacked chart.

5 | 10 | ...

stacked Boolean

Setting "stacked":true will take each of the "series":[ ] value sets and stack them on top of one another

true | false | 1 | 0

step-start
stepStart
String

Applicable on aspect=stepped, sets the location of the stepping relative to two consecutive nodes.

"before" | "middle" | "after"

styles Array

The "styles" array allows you to style charts by node, or individual data point. Most often used with column and bar charts, the feature can be used to differentiate each node on a single series chart. You may also want to style charts by node index rather than series on a multi-series chart. Refer to the Plot/Series Styling Tutorial for more information.

[...]

target String

Sets the url's target for the link associated with the object. Use with "url".

"_blank" | ...

thickness Numeric

Sets the thickness of pie3d charts.

5 | 10 | ...

thousands-separator
thousandsSeparator
String

When you set the "thousands-separator": attribute the punctuation which is used will be placed to separate digits which go into 1,000's 10,000's etc. When placed in the "plot":{ } object this will only effect values which are pulled directly from the series data. Objects such as "scale-y":{ }, "scale-x":{ }, etc..., will need to be set separately.

"." | "," | ...

tooltip Object

Tooltips are the labels that appear when users hover over data points (or nodes) on your chart. Use this object to modify how they appear and what values, tokens, and/or text to display. Refer to the Tooltips Tutorial for more information.

{...}

tooltip-text
tooltipText
String

Using the "tooltip-text":" " attribute allows you to set text for tooltips. This can also be done using a variety of other tokens

"Some Text" | ...

trend-down
trendDown
Object

Stock Charts Only: Sets the styling for trading days that saw stock losses, or when the opening price was greater than that day's closing price. Refer to the Stock Chart Tutorial for more information.

{...}

trend-equal
trendEqual
Object

Stock Charts Only: Sets the styling for trading days that saw no gain or loss, or when the opening price was was equal to that day's closing price. Refer to the Stock Chart Tutorial for more information.

{...}

trend-up
trendUp
Object

Stock Charts Only: Sets the styling for trading days that saw stock gains, or when the opening price was less than that day's closing price. Refer to the Stock Chart Tutorial for more information.

{...}

type String

Mixed Charts Only: In each "series" object, specify what chart type to apply for that series. Note that the series chart type must match the mixed chart type it falls under. Refer to the Mixed Chart Tutorial for more information.

"area" | "bar" | "line" | "bullet" | "scatter" | "bubble" | "stock" | "range" | ...

url String

Sets the URL for the link associated with the object.

"http://www.domain.com/link.php" | "link.asp" | ...

value-box
valueBox
Object

Value boxes are the labels that appear next to or over data points (or nodes) on your chart. Use this object to modify how they appear and what values, tokens, and/or text to display. Refer to the Value Boxes Tutorial for more information.

{...}

values Array

To contain the data values for your chart.

[...]

visible Boolean

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

true | false | 1 | 0

z-end
zEnd
Numeric

Sets the z-axis end point on 3d charts.

10 | "10px" | ...

z-start
zStart
Numeric

Sets the z-axis start point on 3d charts.

10 | "10px" | ...

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