series
[ root » graph » series ]
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 Tutorialfor 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 | ... |
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: "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 "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 "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 "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" | ... |
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-mode backgroundMode | String | To be used with the "plot" (default) | "graph" |
background-position backgroundPosition | String | Sets the position of the background when the "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" |
Object | Allows you to set styling attributes for non-selected (or background) data points. This object may be used in conjunction with the {...} | |
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 "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 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 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 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 "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 true | false | 1 | 0 |
Object | Error Bars Only: To set the styling of the error bars. (Error bar values are set with the {...} | |
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" |
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 "#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 "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 |
Object | To use with crosshair plot labels, when the {...} | |
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 true | false | 1 | 0 |
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 {...} | |
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 {...} | |
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-mode hoverMode | String | To specify whether data points that are hovered over activate per node (default) or plot. Note: Use this attribute with the "node" (default) | "plot" |
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 {...} | |
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" |
Object | The "legend-item":{ } object allows you to style and manipulate the text for each legend item. {...} | |
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 "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 4 | "6px" | ... |
line-segment-size lineSegmentSize | Mixed | Can be used to create custom dashed or dotted lines when used with 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 4 | "6px" | ... |
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 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 |
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" |
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 |
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 {...} | |
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 {...} | |
selection-mode selectionMode | String | To set how data points are selected on a chart. "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 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 ( "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 [...] |
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. "." | "," | ... |
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" | ... |
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. {...} | |
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. {...} | |
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 "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" | ... |
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. {...} | |
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" | ... |