"globals"
"marker"
"tooltip"
"gui"
"context-menu"
"button"
"gear"
"item"
"graphset"
"arrows"
"from"
"label"
"to"
"bubble-legend"
"marker"
"chart"
"color-scale"
"cursor"
"item"
"crosshair-x"
"marker"
"plot-label"
"scale-label"
"crosshair-y"
"scale-label"
"globals"
"marker"
"tooltip"
"guide"
"marker"
"plot-label"
"scale-label"
"heatmap"
"tooltip"
"images"
"labels"
"legend"
"footer"
"header"
"icon"
"item"
"item-off"
"marker"
"marker-off"
"page-off"
"page-on"
"page-status"
"scroll"
"bar"
"handle"
"tooltip"
"nav"
"back"
"tooltip"
"no-data"
"options"
"arrow"
"back"
"tooltip"
"bars"
"tooltip"
"box"
"tooltip"
"button-zoomin"
"tooltip"
"button-zoomout"
"tooltip"
"close"
"containers"
"day"
"items"
"final"
"group-box"
"tooltip"
"handle"
"indicator"
"intermediate"
"item"
"label"
"tooltip"
"item-group-n"
"label"
"tooltip"
"item-id-n"
"label"
"tooltip"
"item-level-n"
"label"
"tooltip"
"label"
"link"
"link[cls-n]"
"link[container-n]"
"link[group-n]"
"link[level-n]"
"link[parent-n]"
"link[sibling]"
"link[source-n]"
"link[target-n]"
"links"
"mmp-marker"
"label"
"month"
"item"
"items"
"outline"
"multi-guide"
"close"
"handle"
"label"
"negative"
"node"
"label"
"tooltip"
"node[cls-n]"
"label"
"tooltip"
"node[collapsed]"
"label"
"tooltip"
"node[group-n]"
"label"
"tooltip"
"node[leaf]"
"label"
"tooltip"
"node[level-n]"
"label"
"tooltip"
"node[parent]"
"label"
"tooltip"
"node[parent-n]"
"label"
"tooltip"
"nodes"
"OBJECT_KEY_NAME"
"label"
"tooltip"
"outlier"
"marker"
"tooltip"
"positive"
"scale"
"label"
"pointer"
"scale-y-2"
"guide"
"item"
"label"
"markers"
"label"
"tick"
"tooltip"
"style"
".td"
".td_even"
".td_first"
".td_last"
".td_n"
".td_n_n"
".td_odd"
".th"
".th_even"
".th_first"
".th_last"
".th_n"
".th_odd"
".tr"
".tr_even"
".tr_first"
".tr_last"
".tr_n"
".tr_odd"
"band"
"tooltip"
"chord"
"tooltip"
"flow"
"item"
"item-flow"
"item-overall"
"label"
"label-overall"
"tooltip"
"subtitle"
"tile"
"label"
"tooltip"
"title"
"tooltip-box"
"tooltip-group"
"trigger"
"value"
"violin"
"week"
"items"
"weekday"
"item"
"items"
"plot"
"error"
"facets"
"goal"
"tooltip"
"guide-label"
"guide-marker"
"highlight-marker"
"hover-marker"
"hover-state"
"styles"
"highlight-state"
"legend-item"
"legend-marker"
"max-marker"
"marker"
"min-marker"
"selected-marker"
"selected-state"
"tooltip"
"trend-down"
"trend-equal"
"trend-up"
"value-box"
"rules"
"plotarea"
"preview"
"handle"
"handle-bottom"
"handle-left"
"handle-right"
"handle-top"
"label"
"refresh"
"scale"
"item"
"scale-k"
"guide"
"item"
"tooltip"
"scale-r"
"center"
"guide"
"item"
"markers"
"label"
"ring"
"tooltip"
"scale-v"
"guide"
"item"
"tooltip"
"scale-x"
"guide"
"item"
"label"
"markers"
"label"
"tooltip"
"scale-y"
"guide"
"item"
"label"
"markers"
"tick"
"tooltip"
"scroll-x"
"bar"
"handle"
"scroll-y"
"bar"
"handle"
"selection-tool"
"series"
"error"
"facets"
"goal"
"tooltip"
"guide-label"
"guide-marker"
"highlight-marker"
"hover-marker"
"highlight-state"
"legend-item"
"legend-marker"
"marker"
"max-marker"
"min-marker"
"selected-marker"
"selected-state"
"style"
"band"
"tooltip"
"chord"
"tooltip"
"item"
"item-flow"
"item-overall"
"label"
"tooltip"
"value-box"
"rules"
"shapes"
"label"
"options"
"style"
"controls"
"zoom-in"
"tooltip"
"zoom-out"
"tooltip"
"items"
"OBECT_KEY_NAME"
"tooltip"
"label"
"tooltip"
"tooltip"
"source"
"subtitle"
"title"
"tooltip"
"zoom"
"label"
"history"
"refresh"
graph » guide » media-rules
media-rules, mediaRules
[ root » graph » guide » mediaRules ]
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 |
---|---|---|
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. Default Value: 1 |
class | String | Sets a class value on the object. Default Value: null |
dataN data-n | Any | Prefix attribute or array using "data-" to define a custom token. |
id | String | Sets the id of the object. Default Value: '' |
lineCap line-cap | String | Sets the stroke-linecap attribute on SVGs Accepted Values: ['butt', 'round', 'square'] Default Value: 'butt' |
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 |
lineJoin line-join | String | Sets the stroke-linejoin attribute on SVGs Accepted Values: ['round', 'miter'] Default Value: 'round' |
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 |
maxHeight max-height | Number | Sets the maximum chart height in pixels. Introduced in: v2.4.1 |
maxWidth max-width | Number | Sets the maximum chart width in pixels. Introduced in: v2.4.1 |
minHeight min-height | Number | Sets the minimum chart height in pixels. Introduced in: v2.4.1 |
minWidth min-width | Number | Sets the minimum chart width in pixels. Introduced in: v2.4.1 |
reverseSeries reverse-series | Boolean | Reserves the order of items in plotLabel of stacked charts. Chart types: Stacked Bar |
scaleLabel scale-label | Object | Configure crosshair scale label |
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 |
sticky | Boolean | Creates sticky object.
Use this with `timeout` to specify how long for object to stick to chart. Default Value: null |
timeout | Number | Time in milliseconds for object to remain sticky.
Use this with `sticky` to specify whether object should stick to chart. Default Value: null |
visible | Boolean | Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON. Default Value: true |