graph » zoom » label » media-rules
media-rules, mediaRules
[ root » graph » zoom » label » 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 |
|---|---|---|
| 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 |
| 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 |
| borderColor border-color | String | Sets the border color of the object. Default Value: '#000' |
| borderWidth border-width | Number | Sets the border width of the object. Default Value: 0 |
| centerRef center-ref | Boolean | Sets the (0,0) x/y coordinates as the center of the box (instead of the top-left corner). Default Value: false |
| 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. |
| fontAngle font-angle | Number | Sets the text's angle. A positive value will rotate the object by that number of degrees clockwise, while a negative value. |
| fontColor font-color | String | Sets the font color of the text. |
| fontFamily font-family | String | Sets the text's font family. |
| fontSize font-size | Number | Sets the text's font size. |
| fontStyle font-style | String | Sets the text's font style. Accepted Values: ['normal', 'italic', 'oblique', 'none'] |
| fontWeight font-weight | Number, String | Sets the text's font weight. Similar to bold. Accepted Values: ['bold', 'none', 'normal', `${string}`] Default Value: 'normal' |
| id | String | Sets the id of the object. Default Value: '' |
| lineHeight line-height | Number | Sets the height of a line box. Default Value: -1 |
| 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 |
| overlap | Boolean | Sets whether the object allows overlapping with other labels. If false, and two objects overlap, only one will be displayed. Default Value: true |
| padding | Number | Sets the object's padding around the text. Up to four values can be entered to set the padding for all four sides, with the first value affecting the top padding, the second value affecting the right padding, and so on, in a clockwise direction. Default Value: null |
| paddingBottom padding-bottom | Number | Sets the object's bottom padding around the text. Default Value: 2 |
| paddingLeft padding-left | Number | Sets the object's left padding around the text. Default Value: 2 |
| paddingRight padding-right | Number | Sets the object's right padding around the text. Default Value: 2 |
| paddingTop padding-top | Number | Sets the object's top padding around the text. Default Value: 2 |
| 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 |
| visible | Boolean | Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON. Default Value: true |
| 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: 1 |