graph » scale-v » media-rules
media-rules
[ root » graph » scale-v » 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 |
|---|---|---|
| blended | Boolean | To 'blend' or 'stick' secondary scales to the primary one. Use with the 'placement' attribute (set the value to 'default') and 'offset-start' and 'offset-end' attributes. Default Value: false Introduced in: v2.3.0 |
| 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 |
| 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 |
| format | String | To format the appearance of the scale values. Use with the %scale-value (%v) token. Default Value: null Chart types: Gauge |
| 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 |
| logBase log-base | Number | Logarithmic Scales only: To set the base value, which defaults to Math.E (Euler's number, the base of natural logarithms). Default Value: 10 |
| 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 |
| minValue min-value | Number, String | Sets the minimum scale value. Accepted Values: ['auto'] Default Value: -1 |
| minWidth min-width | Number | Sets the minimum chart width in pixels. Introduced in: v2.4.1 |
| multiplier | Boolean | Enables abbreviating large numbers with short units, such as K, M, B, etc.. Default Value: null |
| 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: ['standard', 'currency'] Default Value: 'standard' |
| normalize | Boolean | Applies roundings to scale boundaries in order to get nicer min/max/step values. Default Value: true Chart types: Gauge |
| 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'. Default Value: 0 |
| offsetEnd offset-end | Number | Sets an offset from the end of the plotted data. This will cause the data to appear as if it were 'squeezed' from the right side. Default Value: 0 |
| offsetStart offset-start | Number | Sets an offset at the start of the plotted data. This will cause the data to appear as if it were 'squeezed' from the left side. Default Value: 0 |
| offsetX offset-x | Number | Sets an x-offset to apply when positioning the object. Default Value: 0 |
| offsetY offset-y | Number | Sets an y-offset to apply when positioning the object. Default Value: 0 |
| 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 |
| progression | String | To change the scale type from linear (default) to logarithmic. Accepted Values: ['lin', 'linear', 'log'] Default Value: 'lin' |
| 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 |
| refLine ref-line | Object | To style the reference line. Default Value: null Chart types: Gauge |
| refValue ref-value | Number | To set the value the reference line is drawn at. Default Value: 0 Chart types: Gauge |
| scaleFactor scale-factor | Number | Parameter used to control the range (min/max values) of the scale without forcing fixed values. The parameter will be applied on the pre-calculated min/max values and the result forced on the scale. Default Value: 1 |
| 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 |
| 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 |
| tooltipText tooltip-text | Array.<String> | Sets the tooltip text. |
| 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 |
| used | Boolean | Forces the display of the scale, even if its not used on any plot. Default Value: false |
| 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 |
| zoomSnap zoom-snap | Boolean | When zooming is enabled, setting zoom-snap to true snaps the zoom area to the nearest data node as a zoom area is selected. By default, zoom-snap is set to false. Default Value: false |
| 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 |