plot

[ root » graph » plot ]

Objects and attributes placed in the "plot" and/or "series" object(s) will affect the data points on your chart. Attributes placed in the chart "plot" object will affect all of your data sets (global change). Attributes placed in a "series" object will affect that particular data set (local change).

AttributeTypeInfo

active-area activeArea

Boolean

Demo

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

Demo

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

Demo

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

Demo

Sets and customizes the animation used on chart load and reload. See animation for more information on how to configure animations.

{...}

aspect

String

Demo Demo Demo Demo Demo

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

Options by Chart Type:

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

background-color backgroundColor

String

Demo

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

Demo

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

Demo

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

Demo

Sets the direction/s on which the background image is being "stretched".

"x" | "y" | "xy"

background-image backgroundImage

String

Demo

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

Demo

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

Demo

Sets the position of the background when the "background-repeat" value is "no-repeat".

"0 0" | "50 100" | "80% 60%" | ...

background-repeat backgroundRepeat

String

Demo

Sets the repeating mode for the background image.

"no-repeat" | "repeat" | "repeat-x" | "repeat-y"

background-state backgroundState

Object

Demo

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

Demo

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

5 | 10 | ...

bar-max-width barMaxWidth

Numeric

Demo

Bar Charts and Bullet Charts Only: Sets the max width of bars.

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

bar-space barSpace

Numeric

Demo

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

Demo

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

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

bars-overlap barsOverlap

Numeric

Demo Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

4 | "6px" | ...

callout

Boolean

Demo

Sets whether an object will have a callout arrow or not.

true | false | 1 | 0

callout-height calloutHeight

Mixed

Demo

Sets the height of the object's callout arrow. A larger value will create a taller callout arrow.

4 | "6px" | ...

callout-hook calloutHook

Array

Demo

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

Demo

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

Demo

Sets the position for the object's callout arrow. The position is "bottom" by default.

"top" | "right" | "bottom" | "left"

callout-width calloutWidth

Mixed

Demo

Sets the width of the object's callout arrow. A larger value will create a wider callout arrow.

4 | "6px" | ...

connect-nulls connectNulls

Boolean

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

true | false | 1 | 0

contour-on-top contourOnTop

Boolean

Demo

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

csize

Numeric

Demo

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

Demo

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

"hand" | "normal"

data-...

String

Demo

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

decimals

Numeric

Demo

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

5 | 10 | ...

decimals-separator decimalsSeparator

String

Demo

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

"." | "," | ...

description

String

Demo

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

Demo

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

Demo

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

Demo

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

Demo

This attribute sets the values to scientific notation

true | false | 1 | 0

exponentDecimals

Numeric

Demo

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

5 | 10 | ...

fill-angle fillAngle

Numeric

Demo

Sets the angle of the axis along which the linear gradient is drawn.

-45 | 115 | ...

fill-offset-x fillOffsetX

Mixed

Demo

Sets an X offset to apply to the fill.

4 | "6px" | ...

fill-offset-y fillOffsetY

Mixed

Demo

Sets an Y offset to apply to the fill.

4 | "6px" | ...

fill-type fillType

String

Demo

Sets the background gradient fill type to either linear or radial.

"linear" | "radial"

goal

Object

Demo

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

{...}

goals

Array

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

[30]

layout

String

Demo

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

Demo

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

{...}

legend-marker legendMarker

Object

Demo

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

{...}

legend-text legendText

String

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

"solid" | "dotted" | "dashed"

line-width lineWidth

Mixed

Demo

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

4 | "6px" | ...

marker

Object

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

Demo

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

true | false | 1 | 0

min-ratio minRatio

Numeric

Demo

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

Demo

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

Demo

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

true | false | 1 | 0

multiplier

Boolean

Demo

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

Demo

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

Demo

Sets an X offset to apply when positioning the object/shape.

4 | "6px" | ...

offset-y offsetY

Mixed

Demo

Sets a Y offset to apply when positioning the object/shape.

4 | "6px" | ...

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.

{...}

ref-angle refAngle

Numeric

Demo

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

5 | 10 | ...

reference

String

Demo Demo Demo Demo

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"

sampling-step samplingStep

Numeric

Demo

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

Demo

Specifies the scales used by the series item.

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

scaling

String

Demo Demo Demo

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

Demo

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

Demo

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

Demo

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

Demo Demo Demo Demo

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

Demo

Sets whether the object's shadow is visible or not.

Has limited effect on HTML5 implementation.

true | false | 1 | 0

shadow-alpha shadowAlpha

Numeric

Demo

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

Demo

Sets the angle of the shadow underneath the object.

-45 | 115 | ...

shadow-blur shadowBlur

Mixed

Demo

Sets the blur effect size for the shadow of the object.

Has limited effect on HTML5 implementation.

4 | "6px" | ...

shadow-color shadowColor

String

Demo

Sets the color of the shadow of the object.

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

shadow-distance shadowDistance

Mixed

Demo

Sets the distance between the shadow and the object.

4 | "6px" | ...

short

Boolean

Demo

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

Demo

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

Demo

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

5 | 10 | ...

slice

Numeric

Demo

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

Demo

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

5 | 10 | ...

stack

Numeric

Demo

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

Demo

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

Demo Demo Demo Demo

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

"before" | "middle" | "after"

styles

Array

DemoDemo

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

Demo

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

"_blank" | ...

thickness

Numeric

Demo

Sets the thickness of pie3d charts.

5 | 10 | ...

thousands-separator thousandsSeparator

String

Demo

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

Demo

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

Demo

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

Demo

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

Demo

Sets the URL for the link associated with the object.

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

value-box valueBox

Object

Demo

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.

{...}

visible

Boolean

Demo

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

Demo

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

10 | "10px" | ...

z-start zStart

Numeric

Demo

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

10 | "10px" | ...