graph » series » media-rules

media-rules

[ root » graph » series » media-rules ]

Media rules allow for the creation of responsive charts by changing how the chart and its various objects appear at different breakpoints (or chart dimensions). You can create media rules based on the width and/or height of the chart. Try interacting with the following chart. Refer to the Media Rules Tutorial for more information.




AttributeTypeDescription
activeArea
active-area
BooleanExtends the activation area by allowing tooltips and API events to be triggered by the area under a line.
Default Value: false
Introduced in: v2.1.1
Chart types: Area,Radar
alphaNumberSets the opacity on the marker, with 0 being fully transparent and 1 being fully opaque. Note that decimal value requires the leading 0.
alphaArea
alpha-area
NumberSets the transparency level of area in chart. 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 0 before the decimal point. For area charts, applies to the area below the line. Refer to the Area Chart Tutorial for more information. For gauge charts, applies to the background under the gauge line. For radar charts, applies to the area between the center of the radar chart and the line. For range charts, applies to area between two lines. For scatter charts, applies to the polygon region (for `poly` aspect).
Default Value: 0.5
Chart types: Area,Gauge,Radar,Range,Scatter
alphaArea
alpha-area
NumberSets the transparency level of area in chart. 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 0 before the decimal point. For scatter charts, applies to the polygon region (for `poly` aspect). For range charts, applies to area between two lines. For radar charts, applies to the area between the center of the radar chart and the line. For gauge charts, applies to the background under the gauge line. For area charts, applies to the area below the line. Refer to the Area Chart Tutorial for more information.
Default Value: 0.5
Chart types: Area,Gauge,Radar,Range,Scatter
angleNumberSets the rotation angle of the object.
Default Value: 0
angleEnd
angle-end
NumberSets the end angle of a pie shape.
Default Value: 360
angleSpace
angle-space
NumberOn `rose` aspect, it modifies the aperture of the pie section relative to the entire space of the scale interval.
Default Value: null
Chart types: Radar
angleStart
angle-start
NumberSets the beginning angle of a pie shape.
Default Value: 0
animationObjectSets and customizes the animation used on chart load and reload.
aspectStringSets the aspect of the `series` data points in the chart. For area charts, accepted values: ['segmented', 'spline', 'stepped']. For bar charts, accepted values: ['bar', 'cone', 'histogram']. For 3D bar charts, accepted values: ['cylindar', 'pyramid']. For bullet charts, accepted values: ['bar', 'cone', 'histogram']. For line charts, accepted values: ['segmented', 'spline', 'stepped', 'jumped']. For charts, accepted values: . For radar charts, accepted values: ['area', 'bar', 'column', 'dots', 'line', 'mixed', 'piano', 'rose', 'scatter']. For range charts, accepted values: ['segmented', 'spline']. For scatter charts, accepted values: ['segmented', 'spline', 'stepped', 'jumped']. For stock charts, accepted values: ['candlestick', 'whisker']. For 3D vertical bar charts, accepted values: ['cylinder']. For heatmap charts, accepted values: ['brightness', 'size', 'vertical', 'horizontal', 'none'].
Accepted Values: ['area', 'bar', 'brightness', 'candlestick', 'column', 'cone', 'cylindar', 'cylinder', 'dots', 'histogram', 'horizontal', 'jumped', 'line', 'mixed', 'none', 'piano', 'pyramid', 'rose', 'scatter', 'segmented', 'size', 'spline', 'stepped', 'vertical', 'violin', 'whisker']
Default Value: 'segmented'
Chart types: Area,Bar,3D Bar,Bullet,Heatmap-plugin,Line,Radar,Range,Scatter,Stock,Violin
aspectStringSets the aspect of the `series` data points in the chart. For heatmap charts, accepted values: ['brightness', 'size', 'vertical', 'horizontal', 'none']. For 3D vertical bar charts, accepted values: ['cylinder']. For stock charts, accepted values: ['candlestick', 'whisker']. For scatter charts, accepted values: ['segmented', 'spline', 'stepped', 'jumped']. For range charts, accepted values: ['segmented', 'spline']. For radar charts, accepted values: ['area', 'bar', 'column', 'dots', 'line', 'mixed', 'piano', 'rose', 'scatter']. For charts, accepted values: . For line charts, accepted values: ['segmented', 'spline', 'stepped', 'jumped']. For bullet charts, accepted values: ['bar', 'cone', 'histogram']. For 3D bar charts, accepted values: ['cylindar', 'pyramid']. For bar charts, accepted values: ['bar', 'cone', 'histogram']. For area charts, accepted values: ['segmented', 'spline', 'stepped'].
Accepted Values: ['area', 'bar', 'brightness', 'candlestick', 'column', 'cone', 'cylindar', 'cylinder', 'dots', 'histogram', 'horizontal', 'jumped', 'line', 'mixed', 'none', 'piano', 'pyramid', 'rose', 'scatter', 'segmented', 'size', 'spline', 'stepped', 'vertical', 'violin', 'whisker']
Default Value: ''
Introduced in: v2.8.8
Chart types: Area,Bar,3D Bar,Bullet,Heatmap-plugin,Line,Radar,Range,Scatter,Stock,Violin
backgroundClip
background-clip
BooleanClips the background image to the margins of the shape/box.
Default Value: true
backgroundColor
background-color
StringSets the background color of the object. Colors can be entered by name (e.g., "purple", "blue"), hexadecimal notation (e.g., "#666699", #33ccff"), or RGB notation (e.g., "rgb(255,0,0)", "rgb(0,0,255)")
Default Value: null
backgroundColor1
background-color-1
StringSets the first color of a 2 color background gradient of the object. To be used with background-color-2.
Default Value: null
backgroundColor2
background-color-2
StringSets the second color of a 2 color background gradient of the object. To be used with background-color-1.
Default Value: null
backgroundFit
background-fit
StringSets the direction/s on which the background image is being "stretched".
Default Value: ''
backgroundImage
background-image
StringSets a background image for the object. Value can be a local file or a web image's location. For patterns, the available patterns are: [`${string}`, 'PATTERN_BACKWARD_DIAGONAL', 'PATTERN_DARK_DOWNWARD_DIAGONAL', 'PATTERN_DARK_HORIZONTAL', 'PATTERN_DARK_UPWARD_DIAGONAL', 'PATTERN_DARK_VERTICAL', 'PATTERN_DASHED_DOWNWARD_DIAGONAL', 'PATTERN_DASHED_HORIZONTAL', 'PATTERN_DASHED_UPWARD_DIAGONAL', 'PATTERN_DASHED_VERTICAL', 'PATTERN_DIAGONAL_BRICK', 'PATTERN_DIAGONAL_CROSS', 'PATTERN_DIVOT', 'PATTERN_DOTTED_DIAMOND', 'PATTERN_DOTTED_GRID', 'PATTERN_FORWARD_DIAGONAL', 'PATTERN_HORIZONTAL', 'PATTERN_HORIZONTAL_BRICK', 'PATTERN_LARGE_CHECKER_BOARD', 'PATTERN_LARGE_GRID', 'PATTERN_LIGHT_DOWNWARD_DIAGONAL', 'PATTERN_LIGHT_HORIZONTAL', 'PATTERN_LIGHT_UPWARD_DIAGONAL', 'PATTERN_LIGHT_VERTICAL', 'PATTERN_NARROW_HORIZONTAL', 'PATTERN_NARROW_VERTICAL', 'PATTERN_OUTLINED_DIAMOND', 'PATTERN_PLAID', 'PATTERN_SHADE_25', 'PATTERN_SHADE_50', 'PATTERN_SHADE_75', 'PATTERN_SHINGLE', 'PATTERN_SMALL_CHECKER_BOARD', 'PATTERN_SMALL_GRID', 'PATTERN_SOLID_DIAMOND', 'PATTERN_SPHERE', 'PATTERN_TRELLIS', 'PATTERN_VERTICAL', 'PATTERN_WAVE', 'PATTERN_WEAVE', 'PATTERN_WIDE_DOWNWARD_DIAGONAL', 'PATTERN_WIDE_UPWARD_DIAGONAL', 'PATTERN_ZIGZAG'].
Accepted Values: ['PATTERN_BACKWARD_DIAGONAL', 'PATTERN_DARK_DOWNWARD_DIAGONAL', 'PATTERN_DARK_HORIZONTAL', 'PATTERN_DARK_UPWARD_DIAGONAL', 'PATTERN_DARK_VERTICAL', 'PATTERN_DASHED_DOWNWARD_DIAGONAL', 'PATTERN_DASHED_HORIZONTAL', 'PATTERN_DASHED_UPWARD_DIAGONAL', 'PATTERN_DASHED_VERTICAL', 'PATTERN_DIAGONAL_BRICK', 'PATTERN_DIAGONAL_CROSS', 'PATTERN_DIVOT', 'PATTERN_DOTTED_DIAMOND', 'PATTERN_DOTTED_GRID', 'PATTERN_FORWARD_DIAGONAL', 'PATTERN_HORIZONTAL', 'PATTERN_HORIZONTAL_BRICK', 'PATTERN_LARGE_CHECKER_BOARD', 'PATTERN_LARGE_GRID', 'PATTERN_LIGHT_DOWNWARD_DIAGONAL', 'PATTERN_LIGHT_HORIZONTAL', 'PATTERN_LIGHT_UPWARD_DIAGONAL', 'PATTERN_LIGHT_VERTICAL', 'PATTERN_NARROW_HORIZONTAL', 'PATTERN_NARROW_VERTICAL', 'PATTERN_OUTLINED_DIAMOND', 'PATTERN_PLAID', 'PATTERN_SHADE_25', 'PATTERN_SHADE_50', 'PATTERN_SHADE_75', 'PATTERN_SHINGLE', 'PATTERN_SMALL_CHECKER_BOARD', 'PATTERN_SMALL_GRID', 'PATTERN_SOLID_DIAMOND', 'PATTERN_SPHERE', 'PATTERN_TRELLIS', 'PATTERN_VERTICAL', 'PATTERN_WAVE', 'PATTERN_WEAVE', 'PATTERN_WIDE_DOWNWARD_DIAGONAL', 'PATTERN_WIDE_UPWARD_DIAGONAL', 'PATTERN_ZIGZAG', `${string}`]
Default Value: ''
backgroundMarker
background-marker
ObjectAllows 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). 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.
Default Value: null
backgroundMode
background-mode
StringTo 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.
Accepted Values: ['graph', 'plot']
Default Value: 'plot'
backgroundPosition
background-position
StringSets the position of the background when the background-repeat value is no-repeat.
Default Value: '50% 50%'
backgroundRepeat
background-repeat
Boolean, StringSets the repeating mode for the background image.
Default Value: 'repeat'
backgroundScale
background-scale
NumberScales the background image using the specified ratio.
Default Value: 1
backgroundState
background-state
ObjectAllows 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). 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.
Default Value: null
bandSpace
band-space
NumberSets the spacing between pie layers
Chart types: Nested-pie
bandWidths
band-widths
Array.<Number>Sets the width of each band
Chart types: Nested-pie
barMaxWidth
bar-max-width
NumberSets the max width of bars.
Default Value: -1
Chart types: Bar
barSpace
bar-space
NumberSets the amount of space between each bar in a single plot index.
Default Value: 0.1
Chart types: Bar
barSpaceLeft
bar-space-left
NumberSets the left bar space.
Chart types: Vertical Bar
barSpaceRight
bar-space-right
NumberSets the right bar space.
Chart types: Vertical Bar
barWidth
bar-width
NumberSets the width of each bar.
Default Value: 0
Chart types: Bar
barsOverlap
bars-overlap
NumberDefines how much the bars in each plot index should overlap.
Default Value: 0
Chart types: Bar
barsSpaceLeft
bars-space-left
NumberDefines the spacing to the left of the bars at each index position.
Default Value: 0.1
Chart types: Bar
barsSpaceRight
bars-space-right
NumberDefines the spacing to the right of the bars at each index position.
Default Value: 0.1
Chart types: Bar
borderNumberSets the border width of the object. Can be a single value or a string of values, setting the values in the order "top right bottom left"
borderAlpha
border-alpha
NumberSets the transparency level of the border on the object. 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 0 before the decimal point.
Default Value: 1
Introduced in: v2.1.1
borderBottom
border-bottom
NumberSets the object's bottom border style. Accepts solid, dashed, and dotted styles.
Default Value: ''
borderColor
border-color
StringSets the border color of the object.
Default Value: '#000'
borderLeft
border-left
NumberSets the object's left border style. Accepts solid, dashed, and dotted styles.
borderRadius
border-radius
NumberSets 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; 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.
Default Value: 0
borderRadiusBottomLeft
border-radius-bottom-left
NumberSets 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.
Default Value: 0
borderRadiusBottomRight
border-radius-bottom-right
NumberSets 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.
Default Value: 0
borderRadiusTopLeft
border-radius-top-left
NumberSets 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.
Default Value: 0
borderRadiusTopRight
border-radius-top-right
NumberSets 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.
Default Value: 0
borderRight
border-right
NumberSets the object's right border style. Accepts solid, dashed, and dotted styles.
Default Value: ''
borderTop
border-top
NumberSets the object's top border style. Accepts solid, dashed, and dotted styles.
Default Value: ''
borderWidth
border-width
NumberSets the border width of the object.
Default Value: 0
childrenArray.<Object>Sets the children of the series data to define the hierarchy.
Default Value: null
Chart types: Treemap
classStringSets a class value on the object.
Default Value: null
clsStringSet to variables which can be targeted in chart JSON to style individual nodes.
Chart types: Tree-module
clusterIndex
cluster-index
NumberSets the index of the cluster the plot will use.
Default Value: -1
Chart types: Area,Bar,Bubble,Line,Scatter
clusterOffset
cluster-offset
NumberSets a margin for the scale step cluster.
Default Value: 0
Chart types: Area,Bar,Bubble,Line,Scatter
clusteredBooleanSets if the entire plot will be painted within one step of the key scale.
Default Value: false
Introduced in: v2.8.2
Chart types: Area,Bar,Bubble,Line,Scatter
columnStringSets how each column series data is grouped. Accepts a fraction in string format, where the numerator represents the group to place the column in and denomintor is the total number of groups (Ex. 1/2, 2/2, 2/2).
Introduced in: v2.8.0
Chart types: Vertical Bar
connectNulls
connect-nulls
BooleanIf true, connects the line over a null point rather than having a break in the chart.
Default Value: false
Introduced in: v2.6.1
Chart types: Area,Line
contourOnTop
contour-on-top
BooleanSets 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.
Default Value: true
Chart types: Area
csizeNumberSets the size of the indicator by specifying the size of the center. This is a shortcut for `indicator`.
Chart types: Gauge
dataAppendSelection
data-append-selection
BooleanTo specify plot whether plot gets appended to selection. Otherwise, previous selection will be cleared instead of being appended on top.
Default Value: false
Introduced in: v2.9.1
dataBox
data-box
Array.<Array.<Number>>Accepts an array of number arrays of length five or six length. The number array of length five contains: calculated minimum, first quartile, median, third quartile, and maximum values of the dataset. The number array of length six contains: key, min, lower quartile, medium, upper quartile, and max.
Chart types: Boxplot
dataBubble
data-bubble
Array.<String>Set the texts of each bubble.
Default Value: null
Chart types: Bubble-pie
dataClass
data-class
Array.<String>Sets an array of class names which will be applied on each column data cells.
Chart types: Grid
dataDragging
data-dragging
BooleanSet to enable dragging the height of a bar.
Chart types: Dragging Module
dataIgnoreSelection
data-ignore-selection
BooleanTo specify plot to ignore in selection.
Default Value: false
Introduced in: v2.9.1
dataN
data-n
AnyPrefix attribute or array using "data-" to define a custom token.
dataOutlier
data-outlier
Array.<Array.<Number>>Accepts an array of number arrays of length two. The number array contains: experiment number, and outlier values for an individual outlying point.
Chart types: Boxplot
dataPie
data-pie
StringSets the pie slice text.
Default Value: null
Chart types: Bubble-pie
dataV
data-v
Array.<Number>Data array for each pie slice.
Default Value: null
Chart types: Bubble-pie
decimalsNumberSets the number of decimal places displayed for each value.
Default Value: -1
decimalsSeparator
decimals-separator
StringSets the separator to be used in place of the default decimal point. Any string or character can be used to replace the decimal.
Default Value: null
densityNumberSets a factor which will affect the data sampling. Values larger than 1 will increase the sampling step, values smaller than 1 will decrease the sampling step.
Default Value: 1
descriptionStringSets a more detailed description for the plot.
Default Value: null
detachBooleanSpecifies whether or not the slice detaches from the pie when clicked on.
Default Value: true
Chart types: Pie
detachedBooleanSpecifies whether or not the slice detach pie slices on load.
Default Value: false
Chart types: Pie
draggingObjectSets options for the dragging module.
Chart types: Dragging Module
entryArray.<Object>, ObjectModifies the entry arrows, which appear on the left side of the funnel.
Chart types: Funnel
errorObjectError Bars Only: To set the styling of the error bars. (Error bar values are set with the "errors" array.
Default Value: null
errorsArray.<Array.<Number>>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.
Default Value: []
exactBooleanBy default, ZingChart uses sampling when rendering charts. This helps improve rendering speeds and typically does not affect the appearance of the chart. However, using the attribute "exact": true within the "plot": { } object forces ZingChart to render all nodes.
Default Value: false
exitArray.<Object>, ObjectModifies the exit arrows, which appear on the right side of the funnel.
Chart types: Funnel
exponentBooleanSets whether the scale values will be displayed in scientific notation. Particularly useful when dealing with large numbers.
Default Value: false
exponentDecimals
exponent-decimals
NumberSets the number of decimals that will be displayed when using scientific notation. Use with the 'exponent' attribute.
Default Value: 2
extraValues
extra-values
Array.<Number>Sets additional values that will be attached to the plot.
Default Value: 0
facetsObject3D objects are made up of front, left, right, top, and bottom sections. As such, these terms are used within the "facets" object to style each section.
Introduced in: v1.15.0
Chart types: 3D Charts
fakeBooleanSet to refer to node as a branch point for other nodes to branch off from.
Chart types: Tree-module
fillAngle
fill-angle
NumberSets the angle of the axis along which the linear gradient is drawn.
Default Value: 90
fillOffsetX
fill-offset-x
NumberSets an X offset to apply to the fill.
Default Value: 0
fillOffsetY
fill-offset-y
NumberSets a Y offset to apply to the fill.
Default Value: 0
fillType
fill-type
StringSets the background gradient fill type to either linear or radial.
Accepted Values: ['linear', 'none', 'radial']
Default Value: 'linear'
flatBooleanSet to true disables the chart interactivity.
Default Value: false
goalObjectTo set the styling of the goals in bullet charts. Refer to the Bullet Charts Tutorial for more information.
Chart types: Bullet
goalsArray.<Number>Accepts numerical values. Determines where goals are set for all plots. The "goals": [ ] values can also be set individually within each value set.
Chart types: Bullet
gradientColors
gradient-colors
StringSets a set of colors for a complex background gradient consisting of 2 or more colors. To be used with gradient-stops.
Default Value: ''
gradientStops
gradient-stops
StringSets the gradient stops for a complex background gradient consisting of 2 or more colors. To be used with gradient-colors.
Default Value: ''
groupNumber, StringSpecifies the group the object is placed in.
Default Value: ''
Introduced in: v2.8.4
Chart types: Bubble-pack,Chord,Tree-module
groupBars
group-bars
BooleanIf false, will force bars to fully overlap.
Default Value: true
Chart types: Bar
groupSelections
group-selections
BooleanWhen true, automatically selects all nodes with the same scale index as the selected node. The selection-mode attribute must also be set.
Default Value: false
guideLabel
guide-label
ObjectTo use with crosshair plot labels. When you have multiple series in your chart, you may want to separate the crosshair plot labels so that a label appears for each series. To do this, you must add a multiple attribute in the plot-label object in crosshair-x, and set the value to true. You can then createguide-label objects in individual series objects to specify how the text and styling for individual plot labels appear.
guideMarker
guide-marker
ObjectSets the styling for guide markers.
Default Value: false
highlightBooleanWhen 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.
Default Value: false
highlightLegend
highlight-legend
BooleanSets whether the legend entry for the plot will be highlighted when hovering the plot.
Default Value: false
highlightMarker
highlight-marker
ObjectSets the styling for marker when associated legend item is highlighted.
Introduced in: v1.0.1
hintTs
hint-ts
BooleanSet to `true` if using timestamps as keys to activate a small optimization.
hoverMarker
hover-marker
ObjectAllows 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. Note: The "hover-mode" attribute may be used to set whether hover styling activates per node or plot.
Default Value: null
hoverMode
hover-mode
StringTo 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.
Accepted Values: ['node', 'plot']
Default Value: 'node'
idStringSets the id of the object.
Default Value: ''
indicatorArray.<Number>Your gauge chart's needle (sometimes referred to as a dial) indicates where your data value falls on your scale. You can modify the shape of your gauge needle with the indicator attribute. This allows you to display a curved or flat base, rounded or pointed tip, and/or needle that is offset from the gauge's center. Provide your indicator values in an array in the following format: indicator: [R-Base, R-Tip, A-Base, A-Tip, Offset]. See the Gauge tutorial for more information.
Chart types: Gauge
joinArray.<Number>The value of the joined area between the venn sets (the current and the next one).
Chart types: Venn-diagram
jsRule
js-rule
StringSet a window.functionName to call dynamically. Example: `jsRule: "window.functionName()"`.
Default Value: null
keyWidth
key-width
BooleanIf true, the value of `barWidth` will be the size of the key scale (X scale).
Default Value: true
Chart types: Bar
layoutStringDefines the layout of the items of the object.
Accepted Values: ['auto']
Introduced in: v2.8.1
Chart types: Sunburst
legendItem
legend-item
ObjectSets the styling for the active legend items.
legendMarker
legend-marker
ObjectSets the styling for the legend markers.
legendText
legend-text
StringSets a text which will appear in the legend instead of the plot's text attribute.
Default Value: null
lineColor
line-color
StringSets the line color of the object, applicable on non-closed shapes. See also border-color for closed shapes.
Default Value: '#000'
lineGapSize
line-gap-size
NumberCan 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.
Default Value: 0
lineSegmentSize
line-segment-size
NumberCan 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.
Default Value: 0
lineStyle
line-style
StringSets the line style of the object.
Accepted Values: ['dashdot', 'dashed', 'dotted', 'solid']
Default Value: ''
lineWidth
line-width
NumberSets the line width of the object, applicable on non-closed shapes. See also border-width for closed shapes.
Default Value: 0
Chart types: Line
markerObjectSets the styling for markers. If used within plot, style markers associated to all plots. You can also use "marker": { } within individual "series": [ ] values to style each value set individually (PlotMarker2).
Default Value: null
maxHeight
max-height
NumberSets the maximum chart height in pixels.
Introduced in: v2.4.1
maxLine
max-line
ObjectIn the range chart, configures the style of the line representing max values.
Chart types: Range
maxMarker
max-marker
ObjectSets the styling for upper node markers.
Default Value: null
Chart types: Range
maxNodes
max-nodes
NumberApplies 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.
Default Value: null
maxRatio
max-ratio
NumberSets the maximum aspect that the heat map operates in. Must be a value between 0 and 1.
Chart types: Heat-map
maxSize
max-size
NumberSets a maximum bubble size
Default Value: null
Chart types: Bubble
maxTrackers
max-trackers
NumberSets 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.
Default Value: null
maxWidth
max-width
NumberSets the maximum chart width in pixels.
Introduced in: v2.4.1
midPoint
mid-point
BooleanSets whether or not a node is wrapped equally before and after its position. If set to false, the tooltip for the node is triggered only after the node.
Default Value: true
Chart types: Area,Line
minExit
min-exit
NumberSets the minimum width of the funnel exit by either providing a pixel or percentage value. The pixel value corresponds to the width of the funnel base. The percentage or decimal value between 0 to 1 is the size in relation to the funnel plot area.
Default Value: 0
Introduced in: v1.3.0
Chart types: Funnel
minHeight
min-height
NumberSets the minimum chart height in pixels.
Introduced in: v2.4.1
minLine
min-line
ObjectIn the range chart, configures the style of the line representing min values.
Chart types: Range
minMarker
min-marker
ObjectSets the styling for lower node markers.
Default Value: null
Chart types: Range
minRatio
min-ratio
NumberSets the minimum aspect that the heat map operates in. Must be a value between 0 and 1.
Chart types: Heat-map
minSize
min-size
NumberSets a minimum bubble size
Default Value: null
Chart types: Bubble
minWidth
min-width
NumberSets the minimum chart width in pixels.
Introduced in: v2.4.1
modeStringSets the plot's painting mode. Normal mode paints node by node, allowing for rules, fast mode is faster but lacks rule feature.
Accepted Values: ['fast', 'normal']
Default Value: null
monotoneBooleanSets whether monotone interpolation is used for charts using the "spline" aspect.
Default Value: false
multiplierBooleanEnables abbreviating large numbers with short units, such as K, M, B, etc..
Default Value: null
nameStringName of the bubble.
Default Value: ''
Introduced in: v2.8.3
Chart types: Bubble-pack
negationStringThis 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.
Accepted Values: ['currency', 'standard']
Default Value: 'standard'
offsetNumberSets an offset at the start and end of the plotted data. This will cause the data to appear as if it were 'squeezed'. For pie charts, 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.
Chart types: Pie
offsetR
offset-r
NumberSets an R offset to apply when positioning the object.
Default Value: 0
Chart types: Pie
offsetValues
offset-values
Array.<Number>Sets the starting point of each bar on a floating chart.
Default Value: []
Chart types: Bar
offsetX
offset-x
NumberSets an x-offset to apply when positioning the object.
offsetY
offset-y
NumberSets an y-offset to apply when positioning the object.
offsetZ
offset-z
NumberSets a Z offset to apply when positioning the object.
Default Value: 0
paletteArray.<String>, NumberDefines a custom color palette to apply to chart. Set to array of string to define colors in the palette (Array.). Set to number representing the index of the palette to apply (Number).
Default Value: null
paletteArray.<String>, NumberDefines a custom color palette to apply to chart. Set to number representing the index of the palette to apply (Number). Set to array of string to define colors in the palette (Array.).
Default Value: -1
parentStringSpecifies the parent node.
Default Value: ''
Introduced in: v2.8.3
Chart types: Bubble-pack,Tree-module
pieTransform
pie-transform
StringTransforms the shape of pie slices.
Accepted Values: ['bite', 'callout', 'droplet', 'flat', 'flow', 'fold', 'none', `bite=${number}${'%'|''}`, `callout=${number}${'%'|''}`, `flow=${number}${'%'|''}`, `fold=${number}${'%'|''}`]
Default Value: 'none'
Chart types: Pie
previewBoolean, ObjectPreview charts are a miniaturized version of the main chart, allowing users to zoom in and examine sections of a chart while still viewing it in its entirety. Accepts a boolean value to set whether the series data appears in the preview (Boolean).
Default Value: true
previewState
preview-state
ObjectStyles series elements displayed in preview.
Introduced in: v2.6.1
Chart types: Area,Bar,Line
rankNumberSet to a number between 1 - N to represent the overall rank of the item.
Chart types: Rankflow
ranksArray.<Number>Set to a number between 1 - N to represent the ranks of the item across each category.
Chart types: Rankflow
rectShortcut
rect-shortcut
BooleanUsed to force the library to create rectangles using a faster drawing API (instead of painting them like a closed polygon). However, using this would disable effects like rounded borders. It is a performance setting for edge cases.
Default Value: false
refAngle
ref-angle
NumberSets the angle that the chart is rotated.
Default Value: 0
Chart types: Nested-pie,Pie
referenceStringSets the relationship between nodes. For heatmap chats, sets the relationship for setting the heat map values. Refer to the Heat Map tutorial for more information ['plot-max', 'plot-total', 'chart-max', 'chart-total']. For tree-module charts, set to id of parent node to place under. Should also set the `parent` attribute to name of parent node. Places node under a sibling node instead of directly under parent node [`${string}`].
Accepted Values: ['chart-max', 'chart-total', 'plot-max', 'plot-total', `${string}`]
Default Value: 'plot-max'
Chart types: Heat-map,Tree-module
relStringSet to id of series data to set as relative plot.
Default Value: null
samplingStep
sampling-step
NumberBy 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 points 1,10,20,... Also note the "exact": true attribute if you want to force all data points.
Default Value: null
scalesStringSpecifies the scales in a comma-separated string used by the plot item. Example: 'scale-x,scale-y' or 'scale-x, scale-y-2'.
Default Value: []
scalingStringSets whether the area or radius of the bubble should reflect the bubble value
Accepted Values: ['area', 'radius']
Default Value: 'area'
Chart types: Bubble
scrollStepMultiplier
scroll-step-multiplier
NumberSets the multiplier to apply to step when scrolling chart. Requires scrolling to be enabled.
Default Value: 1
segmentTrackers
segment-trackers
BooleanAllows you to specify whether tooltips are activated by the markers and lines (default) or the markers only.
Default Value: true
Chart types: Area,Line
selectedMarker
selected-marker
ObjectAllows 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).
Default Value: null
selectionMode
selection-mode
StringTo 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 dataset). '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.
Accepted Values: ['graph', 'multiple', 'none', 'plot']
Default Value: 'none'
shadowBooleanSets whether the object's shadow is visible or not. Has limited effect on HTML5 implementation.
Default Value: false
shadowAlpha
shadow-alpha
NumberSets the transparency of the shadow of the object. The higher the value, the less transparent the shadow will be.
Default Value: 0.75
shadowAngle
shadow-angle
NumberSets the angle of the shadow underneath the object.
Default Value: 45
shadowBlur
shadow-blur
NumberSets the blur effect size for the shadow of the object. Has limited effect on HTML5 implementation.
Default Value: 0
shadowColor
shadow-color
StringSets the color of the shadow of the object.
Default Value: '#999'
shadowDistance
shadow-distance
NumberSets the distance between the shadow and the object.
Default Value: 2
shareArray.<Number>The value of the shared area between all venn sets.
Chart types: Venn-diagram
shortBooleanAutomatically shortens large units (e.g. 1000000 -> 1M).
Default Value: false
Introduced in: v2.3.1
shortUnit
short-unit
StringSpecifies which unit of measure to use when `short` is set to true.
Accepted Values: ['B', 'K', 'M', 'b', 'k', 'm']
Default Value: ''
Introduced in: v2.3.1
showZero
show-zero
BooleanRenders zero values within series as 1px to visibly show zero values.
Default Value: false
Chart types: Bar,Pie
siblingStringSet to id of another node to link the nodes together.
Chart types: Tree-module
sizeNumberSets the size of the object.
Default Value: 0
Chart types: Pie
sizeFactor
size-factor
NumberSets the size factor to apply to the chart. For bubble charts, scales the size of the bubble.
Default Value: 1
Chart types: Bubble
sizingGroup
sizing-group
NumberSets a group for the bubble plot. The sizing of the bubbles belonging to different groups is independent. If bubble legend is enabled, one is created for each sizing group.
Default Value: 1
Chart types: Bubble
sliceNumberSets the radius of the ring in chart. Accepts percentage or pixel value. For donut charts the default value is 35%.
Default Value: 0
Chart types: Pie
sliceStart
slice-start
NumberSets the size of the center hole for a donut chart
Chart types: Nested-pie
smartSampling
smart-sampling
BooleanA boolean to smart sample and render data at a sampled size. Used in conjunction with exact:false
Default Value: false
Introduced in: v1.10.0
Chart types: Area,Bar,Line
sourceStringId of the source node to create a link or connection between two nodes
Default Value: null
Introduced in: v2.8.4
Chart types: Tree-module
spaceEntry
space-entry
NumberModifies the width of the space before funnel sections
Accepted Values: [ percentage or decimal between 0 and 1]
Default Value: 0.1
Chart types: Funnel
spaceExit
space-exit
NumberModifies the width of the space after funnel secions
Accepted Values: [ percentage or decimal between 0 and 1]
Default Value: 0.1
Chart types: Funnel
stackNumberUsing the 'stack': attribute allows you to assign which stack you want each value set associated with when using a multiple stacked chart.
Default Value: 0
Chart types: Area,Bar,Line,Radar
stackType
stack-type
StringSets the stacking logic for stacked charts.
Accepted Values: ['100%', 'normal']
Default Value: 'normal'
Chart types: Area,Bar,Line,Radar
stackedBooleanSetting 'stacked': true will take each of the 'series' value sets and stack them on top of one another
Default Value: false
startWidth
start-width
StringSets how the starting width of the funnel is set, dynamically (based on the starting value) or statically (always the same width)
Accepted Values: ['dynamic', 'static']
Default Value: 'dynamic'
Introduced in: v1.3.0
Chart types: Funnel
stepStart
step-start
StringWhen `aspect` is set to "stepped", sets the location of the stepping relative to two consecutive nodes.
Accepted Values: ['after', 'before', 'middle']
Default Value: 'middle'
Introduced in: v1.8.0
Chart types: Area,Line
styleObjectSets styling options for the chart.
Chart types: Chord,Rankflow
stylesArray.<Object,String>The "styles" array allows you to style charts by node, or individual data point. 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.
Default Value: []
Chart types: Bar
targetStringSets the target of the object. For shapes, sets the target for the URL to either open URL or use the content fetched from URL (e.g. "window=NAME", "graph=ID") ['_blank', '_top', '_parent', `_window=${string}`, 'graph', `graph=${string}`]. For tree charts, set to the id of the target node to create a link or connection between two node [`${string}`].
Accepted Values: ['_blank', '_parent', '_top', 'graph', `${string}`, `_window=${string}`, `graph=${string}`]
Default Value: null
Chart types: Tree-module
textStringSets the text content of the object. For plots, sets the plot's name.
Default Value: null
textAlign
text-align
StringSets the alignment of the object.
Accepted Values: ['center', 'bottom', 'left', 'middle', 'right']
Default Value: 'center'
thicknessNumberSets the thickness of the chart
Default Value: -1
Chart types: 3D Pie,3D Donut
thousandsSeparator
thousands-separator
StringSets the character used to separate thousands.
Default Value: null
tooltipText
tooltip-text
StringSets the tooltip text.
Default Value: null
totalsArray.<Number>Sets the total value of the pie chart.
Default Value: null
Chart types: Pie
trendDown
trend-down
ObjectStyles day with stock losses
Chart types: Stock
trendEqual
trend-equal
ObjectStyles day with no stock gain or loss
Chart types: Stock
trendUp
trend-up
ObjectStyles days with stock gains
Chart types: Stock
typeStringSets the type of the object. For tree charts, set to 'node' to represent each series data as a floating node or 'link' to draw a link from the `source` to `target` value ['link', 'node']. For mixedcharts, accepted values: ['area', 'area3d', 'bar', 'bar3d', 'boxplot', 'bubble', 'bubble-pack', 'bubble-pie', 'bullet', 'calendar', 'chord', 'depth', 'flame', 'funnel', 'gauge', 'grid', 'hbar', 'hbar3d', 'hboxplot', 'hbubble', 'hbullet', 'heatmap', 'hfunnel', 'hmixed', 'hscatter', 'hwaterfall', 'hwaterfall3d', 'line', 'line3d', 'mixed', 'mixed3d', 'navpie', 'nestedpie', 'null', 'pareto', 'piano', 'pie', 'pie3d', 'pop-pyramid', 'radar', 'rankflow', 'range', 'ring', 'ring3d', 'scatter', 'scorecard', 'stock', 'stream', 'sunburst', 'tilemap', 'tree', 'treemap', 'varea', 'variwide', 'vbar', 'vbar3d', 'vbullet', 'vectorplot', 'venn', 'vfunnel', 'vline', 'vrange', 'vstream', 'waterfall', 'waterfall3d', 'wordcloud', 'zingchart.maps'].
Accepted Values: ['area', 'area3d', 'bar', 'bar3d', 'boxplot', 'bubble', 'bubble-pack', 'bubble-pie', 'bullet', 'calendar', 'chord', 'depth', 'flame', 'funnel', 'gauge', 'grid', 'hbar', 'hbar3d', 'hboxplot', 'hbubble', 'hbullet', 'heatmap', 'hfunnel', 'hmixed', 'hscatter', 'hwaterfall', 'hwaterfall3d', 'line', 'line3d', 'link', 'mixed', 'mixed3d', 'navpie', 'nestedpie', 'node', 'null', 'pareto', 'piano', 'pie', 'pie3d', 'pop-pyramid', 'radar', 'range', 'rankflow', 'ring', 'ring3d', 'scatter', 'scorecard', 'stock', 'stream', 'sunburst', 'tilemap', 'tree', 'treemap', 'varea', 'variwide', 'vbar', 'vbar3d', 'vbullet', 'vectorplot', 'venn', 'vfunnel', 'vline', 'vrange', 'vstream', 'waterfall', 'waterfall3d', 'wordcloud', 'zingchart.maps']
Introduced in: v2.8.4
Chart types: Tree-module
urlStringSets an URL associated with this object. Used mostly on nodes/labels/shapes with their associated click events.
Default Value: null
valueNumberThe numeric value of the bubble object being added.
Default Value: ''
Introduced in: v2.8.3
Chart types: Bubble-pack
valueBox
value-box
Array.<Object>, ObjectValue 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.
Default Value: null
valuesArray.<any>Data to display in chart.
visibleBooleanSets the visibility of the object. Allows you to turn off the object without removing lines of JSON.
Default Value: true
xNumberSets the X position of the object.
yNumberSets the Y position of the object.
zEnd
z-end
NumberSets the z-axis end point on 3D charts.
Accepted Values: ['_blank', '_parent', '_top', '_window=NAME', 'graph=ID']
Default Value: null
Chart types: 3D Charts
zIndex
z-index
NumberSets the z position of the object. Objects with higher z indexes will appear "above" those with lower z index values.
Default Value: 0
zSort
z-sort
NumberUsed to force the sorting of the active areas (which trigger the tooltip) of two shapes in case they overlap.
Default Value: 1
zStart
z-start
NumberSets the z-axis start point on 3D charts.
Introduced in: v1.0.1
Chart types: 3D Charts