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
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
factor	Number	Applies a multiplication factor to all scale items. Default Value: 1
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
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
labels	Array.<Number,String>	Sets the labels. Chart types: Gauge
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
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
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
maxLabels max-labels	Number	Sets the maximum number of labels to display along the axis.
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
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
mirrored	Boolean	Setting 'mirrored': true will reverse/mirror the x axis values. 'scale-x': {} values will read right to left. Default Value: false
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
placement	String	Sets the placement of the object. Accepted Values: ['cross', 'default', 'opposite'] Default Value: 'default'
progression	String	To change the scale type from linear (default) to logarithmic. Accepted Values: ['lin', 'linear', 'log'] Default Value: 'lin'
ranged	Boolean	Sets the scale as "ranged", basically the node is placed in the middle of the interval between two scale values. Default Value: false
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
refZero ref-zero	Boolean	Reference for syncing to scale's zero value. Scales with `syncZero: true` syncs to this scale's zero value. Default Value: false
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
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
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
showZero show-zero	Boolean	If true, forces the scale to display 0 Default Value: true Introduced in: v1.10.0
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
stepMultiplier step-multiplier	Number	Applies a multiplier to the interval used to show ticks/items on scale. The multiplier is not applied only if the number of items currently active is greater than the multiplier value. Otherwise, all items are being displayed. Introduced in: v2.9.1
syncZero sync-zero	Boolean	Sync zero value to the scale with `refValue: true`. Default Value: false
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
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
zoomToValues zoom-to-values	Array.<Number>	To specify the node values the chart will zoom to by default at chart render. This is best used with non-linear data (or array of array data) with scrollbars or preview charts. Default Value: null
zooming	Boolean	To turn on chart zooming on the scale. Default Value: false Chart types: Gauge