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.
| Attribute | Type | Description |
|---|---|---|
| activeArea active-area | Boolean | Extends 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 |
| alpha | Number | Sets 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 | Number | Sets 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 | Number | Sets 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 |
| angle | Number | Sets the rotation angle of the object. Default Value: 0 |
| angleEnd angle-end | Number | Sets the end angle of a pie shape. Default Value: 360 |
| angleSpace angle-space | Number | On `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 | Number | Sets the beginning angle of a pie shape. Default Value: 0 |
| animation | Object | Sets and customizes the animation used on chart load and reload. |
| aspect | String | Sets 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 |
| aspect | String | Sets 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 | Boolean | Clips the background image to the margins of the shape/box. Default Value: true |
| backgroundColor background-color | String | Sets 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 | String | Sets 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 | String | Sets 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 | String | Sets the direction/s on which the background image is being "stretched". Default Value: '' |
| backgroundImage background-image | String | Sets 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 | Object | Allows you to set marker styling attributes for non-selected (or background) data points. This object may be used in conjunction with the "background-state" object, depending on the chart type. You can also style the selected data points using the "selected-state" and/or "selected-marker" object(s). 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 | 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. Accepted Values: ['graph', 'plot'] Default Value: 'plot' |
| backgroundPosition background-position | String | Sets the position of the background when the background-repeat value is no-repeat. Default Value: '50% 50%' |
| backgroundRepeat background-repeat | Boolean, String | Sets the repeating mode for the background image. Default Value: 'repeat' |
| backgroundScale background-scale | Number | Scales the background image using the specified ratio. Default Value: 1 |
| backgroundState background-state | Object | Allows you to set styling attributes for non-selected (or background) data points. This object may be used in conjunction with the "background-marker" object, depending on the chart type. You can also style the selected data points using the "selected-state" and/or "selected-marker" object(s). 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 | Number | Sets 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 | Number | Sets the max width of bars. Default Value: -1 Chart types: Bar |
| barSpace bar-space | Number | Sets the amount of space between each bar in a single plot index. Default Value: 0.1 Chart types: Bar |
| barSpaceLeft bar-space-left | Number | Sets the left bar space. Chart types: Vertical Bar |
| barSpaceRight bar-space-right | Number | Sets the right bar space. Chart types: Vertical Bar |
| barWidth bar-width | Number | Sets the width of each bar. Default Value: 0 Chart types: Bar |
| barsOverlap bars-overlap | Number | Defines how much the bars in each plot index should overlap. Default Value: 0 Chart types: Bar |
| barsSpaceLeft bars-space-left | Number | Defines the spacing to the left of the bars at each index position. Default Value: 0.1 Chart types: Bar |
| barsSpaceRight bars-space-right | Number | Defines the spacing to the right of the bars at each index position. Default Value: 0.1 Chart types: Bar |
| border | Number | Sets 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 | Number | Sets 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 | Number | Sets the object's bottom border style. Accepts solid, dashed, and dotted styles. Default Value: '' |
| borderColor border-color | String | Sets the border color of the object. Default Value: '#000' |
| borderLeft border-left | Number | Sets the object's left border style. Accepts solid, dashed, and dotted styles. |
| borderRadius border-radius | Number | 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; 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 | Number | 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. Default Value: 0 |
| borderRadiusBottomRight border-radius-bottom-right | Number | 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. Default Value: 0 |
| borderRadiusTopLeft border-radius-top-left | Number | 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. Default Value: 0 |
| borderRadiusTopRight border-radius-top-right | Number | 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. Default Value: 0 |
| borderRight border-right | Number | Sets the object's right border style. Accepts solid, dashed, and dotted styles. Default Value: '' |
| borderTop border-top | Number | Sets the object's top border style. Accepts solid, dashed, and dotted styles. Default Value: '' |
| borderWidth border-width | Number | Sets the border width of the object. Default Value: 0 |
| children | Array.<Object> | Sets the children of the series data to define the hierarchy. Default Value: null Chart types: Treemap |
| class | String | Sets a class value on the object. Default Value: null |
| cls | String | Set to variables which can be targeted in chart JSON to style individual nodes. Chart types: Tree-module |
| clusterIndex cluster-index | Number | Sets the index of the cluster the plot will use. Default Value: -1 Chart types: Area,Bar,Bubble,Line,Scatter |
| clusterOffset cluster-offset | Number | Sets a margin for the scale step cluster. Default Value: 0 Chart types: Area,Bar,Bubble,Line,Scatter |
| clustered | Boolean | Sets 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 |
| column | String | Sets 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 | Boolean | If 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 | Boolean | 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. Default Value: true Chart types: Area |
| csize | Number | Sets 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 | Boolean | To 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 | Boolean | Set to enable dragging the height of a bar. Chart types: Dragging Module |
| dataIgnoreSelection data-ignore-selection | Boolean | To specify plot to ignore in selection. Default Value: false Introduced in: v2.9.1 |
| dataN data-n | Any | Prefix 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 | String | Sets 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 |
| decimals | Number | Sets the number of decimal places displayed for each value. Default Value: -1 |
| decimalsSeparator decimals-separator | String | Sets 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 |
| density | Number | Sets 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 |
| description | String | Sets a more detailed description for the plot. Default Value: null |
| detach | Boolean | Specifies whether or not the slice detaches from the pie when clicked on. Default Value: true Chart types: Pie |
| detached | Boolean | Specifies whether or not the slice detach pie slices on load. Default Value: false Chart types: Pie |
| dragging | Object | Sets options for the dragging module. Chart types: Dragging Module |
| entry | Array.<Object>, Object | Modifies the entry arrows, which appear on the left side of the funnel. Chart types: Funnel |
| error | Object | Error Bars Only: To set the styling of the error bars. (Error bar values are set with the "errors" array. Default Value: null |
| errors | Array.<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: [] |
| exact | Boolean | By 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 |
| exit | Array.<Object>, Object | Modifies the exit arrows, which appear on the right side of the funnel. Chart types: Funnel |
| exponent | Boolean | Sets whether the scale values will be displayed in scientific notation. Particularly useful when dealing with large numbers. Default Value: false |
| exponentDecimals exponent-decimals | Number | Sets 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 |
| facets | Object | 3D 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 |
| fake | Boolean | Set to refer to node as a branch point for other nodes to branch off from. Chart types: Tree-module |
| fillAngle fill-angle | Number | Sets the angle of the axis along which the linear gradient is drawn. Default Value: 90 |
| fillOffsetX fill-offset-x | Number | Sets an X offset to apply to the fill. Default Value: 0 |
| fillOffsetY fill-offset-y | Number | Sets a Y offset to apply to the fill. Default Value: 0 |
| fillType fill-type | String | Sets the background gradient fill type to either linear or radial. Accepted Values: ['linear', 'none', 'radial'] Default Value: 'linear' |
| flat | Boolean | Set to true disables the chart interactivity. Default Value: false |
| goal | Object | To set the styling of the goals in bullet charts. Refer to the Bullet Charts Tutorial for more information. Chart types: Bullet |
| goals | Array.<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 | String | Sets 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 | String | Sets the gradient stops for a complex background gradient consisting of 2 or more colors. To be used with gradient-colors. Default Value: '' |
| group | Number, String | Specifies the group the object is placed in. Default Value: '' Introduced in: v2.8.4 Chart types: Bubble-pack,Chord,Tree-module |
| groupBars group-bars | Boolean | If false, will force bars to fully overlap. Default Value: true Chart types: Bar |
| groupSelections group-selections | Boolean | When 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 | Object | To use with crosshair plot labels. When you have multiple series in your chart, you may want to separate the crosshair plot labels so that a label appears for each series. To do this, 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 | Object | Sets the styling for guide markers. Default Value: false |
| highlight | Boolean | When set to true, it highlights the corresponding series when the user hovers over it in the legend. Note: This attribute may be used in conjunction with the "highlight-state" and/or "highlight-marker" object(s), which allow for custom styling. Default Value: false |
| highlightLegend highlight-legend | Boolean | Sets whether the legend entry for the plot will be highlighted when hovering the plot. Default Value: false |
| highlightMarker highlight-marker | Object | Sets the styling for marker when associated legend item is highlighted. Introduced in: v1.0.1 |
| hintTs hint-ts | Boolean | Set to `true` if using timestamps as keys to activate a small optimization. |
| hoverMarker hover-marker | Object | Allows you to set styling attributes, which are triggered when the user hovers over the data points (or nodes) on the chart. This object may be used in conjunction with the "hover-state" object, depending on the chart type. Note: The "hover-mode" attribute may be used to set whether hover styling activates per node or plot. Default Value: null |
| hoverMode hover-mode | String | To specify whether data points that are hovered over activate per node (default) or plot. Note: Use this attribute with the "hover-state" and/or "hover-marker" object(s), which allow you specify the styling attributes you want applied. Accepted Values: ['node', 'plot'] Default Value: 'node' |
| id | String | Sets the id of the object. Default Value: '' |
| indicator | Array.<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 |
| join | Array.<Number> | The value of the joined area between the venn sets (the current and the next one). Chart types: Venn-diagram |
| jsRule js-rule | String | Set a window.functionName to call dynamically.
Example: `jsRule: "window.functionName()"`. Default Value: null |
| keyWidth key-width | Boolean | If true, the value of `barWidth` will be the size of the key scale (X scale). Default Value: true Chart types: Bar |
| layout | String | Defines the layout of the items of the object. Accepted Values: ['auto'] Introduced in: v2.8.1 Chart types: Sunburst |
| legendItem legend-item | Object | Sets the styling for the active legend items. |
| legendMarker legend-marker | Object | Sets the styling for the legend markers. |
| legendText legend-text | String | Sets a text which will appear in the legend instead of the plot's text attribute. Default Value: null |
| lineColor line-color | String | Sets 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 | Number | 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. Default Value: 0 |
| lineSegmentSize line-segment-size | Number | 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. Default Value: 0 |
| lineStyle line-style | String | Sets the line style of the object. Accepted Values: ['dashdot', 'dashed', 'dotted', 'solid'] Default Value: '' |
| lineWidth line-width | Number | Sets the line width of the object, applicable on non-closed shapes. See also border-width for closed shapes. Default Value: 0 Chart types: Line |
| marker | Object | Sets 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 | Number | Sets the maximum chart height in pixels. Introduced in: v2.4.1 |
| maxLine max-line | Object | In the range chart, configures the style of the line representing max values. Chart types: Range |
| maxMarker max-marker | Object | Sets the styling for upper node markers. Default Value: null Chart types: Range |
| maxNodes max-nodes | Number | 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. Default Value: null |
| maxRatio max-ratio | Number | Sets the maximum aspect that the heat map operates in. Must be a value between 0 and 1. Chart types: Heat-map |
| maxSize max-size | Number | Sets a maximum bubble size Default Value: null Chart types: Bubble |
| maxTrackers max-trackers | Number | 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. Default Value: null |
| maxWidth max-width | Number | Sets the maximum chart width in pixels. Introduced in: v2.4.1 |
| midPoint mid-point | Boolean | Sets 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 | Number | Sets 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 | Number | Sets the minimum chart height in pixels. Introduced in: v2.4.1 |
| minLine min-line | Object | In the range chart, configures the style of the line representing min values. Chart types: Range |
| minMarker min-marker | Object | Sets the styling for lower node markers. Default Value: null Chart types: Range |
| minRatio min-ratio | Number | Sets the minimum aspect that the heat map operates in. Must be a value between 0 and 1. Chart types: Heat-map |
| minSize min-size | Number | Sets a minimum bubble size Default Value: null Chart types: Bubble |
| minWidth min-width | Number | Sets the minimum chart width in pixels. Introduced in: v2.4.1 |
| mode | String | Sets 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 |
| monotone | Boolean | Sets whether monotone interpolation is used for charts using the "spline" aspect. Default Value: false |
| multiplier | Boolean | Enables abbreviating large numbers with short units, such as K, M, B, etc.. Default Value: null |
| name | String | Name of the bubble. Default Value: '' Introduced in: v2.8.3 Chart types: Bubble-pack |
| 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. Accepted Values: ['currency', 'standard'] Default Value: 'standard' |
| offset | Number | Sets 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 | Number | Sets 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 | Number | Sets an x-offset to apply when positioning the object. |
| offsetY offset-y | Number | Sets an y-offset to apply when positioning the object. |
| offsetZ offset-z | Number | Sets a Z offset to apply when positioning the object. Default Value: 0 |
| palette | Array.<String>, Number | Defines a custom color palette to apply to chart.
Set to array of string to define colors in the palette (Array. Default Value: null |
| palette | Array.<String>, Number | Defines 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 |
| parent | String | Specifies the parent node. Default Value: '' Introduced in: v2.8.3 Chart types: Bubble-pack,Tree-module |
| pieTransform pie-transform | String | Transforms 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 |
| preview | Boolean, Object | Preview 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 | Object | Styles series elements displayed in preview. Introduced in: v2.6.1 Chart types: Area,Bar,Line |
| rank | Number | Set to a number between 1 - N to represent the overall rank of the item. Chart types: Rankflow |
| ranks | Array.<Number> | Set to a number between 1 - N to represent the ranks of the item across each category. Chart types: Rankflow |
| rectShortcut rect-shortcut | Boolean | Used 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 | Number | Sets the angle that the chart is rotated. Default Value: 0 Chart types: Nested-pie,Pie |
| reference | String | Sets 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 |
| rel | String | Set to id of series data to set as relative plot. Default Value: null |
| samplingStep sampling-step | Number | 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 points 1,10,20,... Also note the "exact": true attribute if you want to force all data points. Default Value: null |
| scales | String | Specifies 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: [] |
| scaling | String | Sets 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 | Number | Sets the multiplier to apply to step when scrolling chart. Requires scrolling to be enabled. Default Value: 1 |
| segmentTrackers segment-trackers | Boolean | Allows 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 | Object | Allows you to set marker styling attributes, which are triggered when the user clicks on or selects data points on your chart. This object may be used in conjunction with the 'selected-state' object, depending on the chart type. You can also style the unselected (or background) data points using the 'background-state' and/or 'background-marker' object(s). Default Value: null |
| selectionMode selection-mode | String | To set how data points are selected on a chart. 'none' (default) prevents any selection. 'plot' allows you to select one node (or data point) per series (or 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' |
| shadow | Boolean | Sets whether the object's shadow is visible or not. Has limited effect on HTML5 implementation. Default Value: false |
| shadowAlpha shadow-alpha | Number | Sets 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 | Number | Sets the angle of the shadow underneath the object. Default Value: 45 |
| shadowBlur shadow-blur | Number | Sets the blur effect size for the shadow of the object. Has limited effect on HTML5 implementation. Default Value: 0 |
| shadowColor shadow-color | String | Sets the color of the shadow of the object. Default Value: '#999' |
| shadowDistance shadow-distance | Number | Sets the distance between the shadow and the object. Default Value: 2 |
| share | Array.<Number> | The value of the shared area between all venn sets. Chart types: Venn-diagram |
| short | Boolean | Automatically shortens large units (e.g. 1000000 -> 1M). Default Value: false Introduced in: v2.3.1 |
| shortUnit short-unit | String | Specifies 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 | Boolean | Renders zero values within series as 1px to visibly show zero values. Default Value: false Chart types: Bar,Pie |
| sibling | String | Set to id of another node to link the nodes together. Chart types: Tree-module |
| size | Number | Sets the size of the object. Default Value: 0 Chart types: Pie |
| sizeFactor size-factor | Number | Sets 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 | Number | Sets 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 |
| slice | Number | Sets 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 | Number | Sets the size of the center hole for a donut chart Chart types: Nested-pie |
| smartSampling smart-sampling | Boolean | A 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 |
| source | String | Id 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 | Number | Modifies 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 | Number | Modifies the width of the space after funnel secions Accepted Values: [ percentage or decimal between 0 and 1] Default Value: 0.1 Chart types: Funnel |
| stack | Number | Using 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 | String | Sets the stacking logic for stacked charts. Accepted Values: ['100%', 'normal'] Default Value: 'normal' Chart types: Area,Bar,Line,Radar |
| stacked | Boolean | Setting 'stacked': true will take each of the 'series' value sets and stack them on top of one another Default Value: false |
| startWidth start-width | String | Sets 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 | String | When `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 |
| style | Object | Sets styling options for the chart. Chart types: Chord,Rankflow |
| styles | Array.<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 |
| target | String | Sets 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 |
| text | String | Sets the text content of the object.
For plots, sets the plot's name. Default Value: null |
| textAlign text-align | String | Sets the alignment of the object. Accepted Values: ['center', 'bottom', 'left', 'middle', 'right'] Default Value: 'center' |
| thickness | Number | Sets the thickness of the chart Default Value: -1 Chart types: 3D Pie,3D Donut |
| thousandsSeparator thousands-separator | String | Sets the character used to separate thousands. Default Value: null |
| tooltipText tooltip-text | String | Sets the tooltip text. Default Value: null |
| totals | Array.<Number> | Sets the total value of the pie chart. Default Value: null Chart types: Pie |
| trendDown trend-down | Object | Styles day with stock losses Chart types: Stock |
| trendEqual trend-equal | Object | Styles day with no stock gain or loss Chart types: Stock |
| trendUp trend-up | Object | Styles days with stock gains Chart types: Stock |
| type | String | Sets 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 |
| url | String | Sets an URL associated with this object. Used mostly on nodes/labels/shapes with their associated click events. Default Value: null |
| value | Number | The numeric value of the bubble object being added. Default Value: '' Introduced in: v2.8.3 Chart types: Bubble-pack |
| valueBox value-box | Array.<Object>, 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. Default Value: null |
| values | Array.<any> | Data to display in chart. |
| visible | Boolean | Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON. Default Value: true |
| x | Number | Sets the X position of the object. |
| y | Number | Sets the Y position of the object. |
| zEnd z-end | Number | Sets 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 | Number | Sets 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 | Number | Used 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 | Number | Sets the z-axis start point on 3D charts. Introduced in: v1.0.1 Chart types: 3D Charts |