graph » scale-r » media-rules
media-rules
[ root » graph » scale-r » 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 |
|---|---|---|
| angle | Number | Sets the rotation angle of the object. Default Value: 0 |
| aperture | Number | Sets the degree that the scale should occupy.
For pie charts, the default is 360 degrees (full circle).
For gauge charts, the default is 270 degrees. Default Value: 360 Chart types: Gauge,Pie |
| 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: '' |
| 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 |
| 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 |
| center | Object | Styles the pivot point of the gauge needle. Chart types: Gauge |
| 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. |
| decimals | Number | Sets the number of decimal places displayed for each value. Default Value: -1 Chart types: Gauge |
| 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: '.' Chart types: Gauge |
| defaultValue default-value | String | Sets the default value token values to display until the value is available. Default Value: null Chart types: Gauge |
| exponent | Boolean | Sets whether the scale values will be displayed in scientific notation. Particularly useful when dealing with large numbers. Default Value: false Chart types: Gauge |
| 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 Chart types: Gauge |
| 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' |
| fixedStep fixed-step | Boolean | Used in pair with a step:1 and discrete values for scales, forces proper behavior on scale zooming/scrolling. Default Value: false |
| flat | Boolean | Set to true disables the chart interactivity. Default Value: false |
| format | String | To format the appearance of the scale values. Use with the %scale-value (%v) token. Default Value: null Chart types: Gauge |
| 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: '' |
| guide | Object | Used to style the lines and backgrounds behind the plotted data. Default Value: null |
| id | String | Sets the id of the object. Default Value: '' |
| itemsOverlap items-overlap | Boolean | To force all of the scale items to display. It is generally used with the 'max-items' attribute. Default Value: false |
| labels | Array.<Number,String> | Sets the labels. Chart types: Gauge |
| markers | Array.<Object> | To create and style the scale markers, which can appear as areas or lines. Default Value: [] |
| master | String | Sets a master scale. The current scale will always be in sync with it's master scale. Default Value: '' |
| max-value-factor | Boolean | Ratio from (max-min) interval which will be added to the max value. Default Value: true |
| maxDecimals max-decimals | Number | Sets the max number of decimals that will be used to format the values. Default Value: -1 Chart types: Gauge |
| maxHeight max-height | Number | Sets the maximum chart height in pixels. Introduced in: v2.4.1 |
| maxItems max-items | Number | Sets the maximum number of items displayed. Chart types: Gauge |
| maxTicks max-ticks | Number | Sets the maximum number of ticks to display on the scale. Chart types: Gauge |
| maxValue max-value | Number, String | Sets the maximum scale value. Accepted Values: ['auto'] |
| maxWidth max-width | Number | Sets the maximum chart width in pixels. Introduced in: v2.4.1 |
| min-value-factor | Boolean | Ratio from (max-min) interval which will be subtracted to the min value. Default Value: true |
| 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 |
| minorGuide minor-guide | Object | To style the minor grid lines, which appear between the major grid lines. Default Value: null Chart types: Gauge |
| minorTick minor-tick | Object | To style the minor tick marks, which appear between the major tick marks. Note that the 'minor-ticks' attribute must be included in your scale object to set the number of minor tick marks displayed. Default Value: null Chart types: Gauge |
| minorTicks minor-ticks | Number | Sets the number of minor tick marks displayed between the major tick marks. Note that this attribute is required to style the minor tick marks and/or guides. Default Value: 0 Chart types: Gauge |
| normalize | Boolean | Applies roundings to scale boundaries in order to get nicer min/max/step values. Default Value: true Chart types: Gauge |
| placement | String | Sets the placement of the object. Accepted Values: ['cross', 'default', 'opposite'] Default Value: 'default' |
| ranged | Boolean | Sets the scale as "ranged", basically the node is placed in the middle of the interval between two scale values. Chart types: Radar |
| 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.
For pie charts, the default is 90 degrees (3 o'clock).
For gauge charts, the default is -90 degrees (9 o'clock). Default Value: 90 Chart types: Gauge,Pie,Radar |
| ring | Object | Styles the ring that appears around the outer edge of the gauge. Chart types: Gauge |
| short | Boolean | Automatically shortens large units (e.g. 1000000 -> 1M) Default Value: false Chart types: Gauge |
| shortUnit short-unit | String | Specifies which unit of measure to use when `short` is set to true. Accepted Values: ['k', 'K', 'm', 'M', 'b', 'B'] Default Value: '' Chart types: Gauge |
| showLabels show-labels | Array.<String> | Sets a filter to show only specific items on a scale. It does NOT force the display of the specified items if those are not already generated by the scale. Default Value: null Chart types: Gauge |
| step | Number | The 'step': attribute sets the value of each step along an axis. When using numeric values along the axis, a numeric value for 'step': will incrementally increase the value of each tick along the axis by the specified step value. When the transform attribute is set to 'type':'date', a number of different step values can then be used to modify the step increments. Accepted Values: [`${number}`, `${number|''}second`, `${number|''}minute`, `${number|''}hour`, `${number|''}day`, `${number|''}week`, `${number|''}month`, `${number|''}year`] Default Value: 1 Chart types: Gauge |
| thousandsSeparator thousands-separator | String | Sets the character used to separate thousands. Default Value: '' |
| tick | Object | Used to style the scale tick marks. Default Value: null Chart types: Gauge |
| transform | Object | Transforms data to specified format.
For example, if data is coded as date and time, `type: 'date'` is specifed in this object,
and `scaleX.transform: '%D, %d %M %h:%i %A'` is set,
then '1311261385209' will display 'Wed, 19 of May 05:00 PM'. Default Value: null Chart types: Gauge |
| values | Array.<Number,String>, Number, String | Sets the scale values. Default Value: [] |
| 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 |
| zoomTo zoom-to | Array.<Number> | To specify the node indices the chart will zoom to by default at chart render. This is best used with linear data (or simple array data) with scrollbars or preview charts Default Value: null Chart types: Gauge |
| zooming | Boolean | To turn on chart zooming on the scale. Default Value: false Chart types: Gauge |