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.



AttributeTypeDescription
angleNumberSets the rotation angle of the object.
Default Value: 0
apertureNumberSets 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
BooleanClips the background image to the margins of the shape/box.
Default Value: true
backgroundColor
background-color
StringSets 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
StringSets 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
StringSets 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
StringSets the direction/s on which the background image is being "stretched".
Default Value: ''
backgroundImage
background-image
StringSets 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
StringSets the position of the background when the background-repeat value is no-repeat.
Default Value: '50% 50%'
backgroundRepeat
background-repeat
Boolean, StringSets the repeating mode for the background image.
Default Value: 'repeat'
backgroundScale
background-scale
NumberScales the background image using the specified ratio.
Default Value: 1
borderNumberSets 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
NumberSets 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
NumberSets the object's bottom border style. Accepts solid, dashed, and dotted styles.
Default Value: ''
borderColor
border-color
StringSets the border color of the object.
Default Value: '#000'
borderLeft
border-left
NumberSets the object's left border style. Accepts solid, dashed, and dotted styles.
borderRadius
border-radius
NumberSets 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
NumberSets 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
NumberSets 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
NumberSets 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
NumberSets 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
NumberSets the object's right border style. Accepts solid, dashed, and dotted styles.
Default Value: ''
borderTop
border-top
NumberSets the object's top border style. Accepts solid, dashed, and dotted styles.
Default Value: ''
borderWidth
border-width
NumberSets the border width of the object.
Default Value: 0
centerObjectStyles the pivot point of the gauge needle.
Chart types: Gauge
classStringSets a class value on the object.
Default Value: null
dataN
data-n
AnyPrefix attribute or array using "data-" to define a custom token.
decimalsNumberSets the number of decimal places displayed for each value.
Default Value: -1
Chart types: Gauge
decimalsSeparator
decimals-separator
StringSets 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
StringSets the default value token values to display until the value is available.
Default Value: null
Chart types: Gauge
exponentBooleanSets 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
NumberSets 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
NumberSets the angle of the axis along which the linear gradient is drawn.
Default Value: 90
fillOffsetX
fill-offset-x
NumberSets an X offset to apply to the fill.
Default Value: 0
fillOffsetY
fill-offset-y
NumberSets a Y offset to apply to the fill.
Default Value: 0
fillType
fill-type
StringSets the background gradient fill type to either linear or radial.
Accepted Values: ['linear', 'none', 'radial']
Default Value: 'linear'
fixedStep
fixed-step
BooleanUsed in pair with a step:1 and discrete values for scales, forces proper behavior on scale zooming/scrolling.
Default Value: false
flatBooleanSet to true disables the chart interactivity.
Default Value: false
formatStringTo format the appearance of the scale values. Use with the %scale-value (%v) token.
Default Value: null
Chart types: Gauge
gradientColors
gradient-colors
StringSets 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
StringSets the gradient stops for a complex background gradient consisting of 2 or more colors. To be used with gradient-colors.
Default Value: ''
guideObjectUsed to style the lines and backgrounds behind the plotted data.
Default Value: null
idStringSets the id of the object.
Default Value: ''
itemsOverlap
items-overlap
BooleanTo force all of the scale items to display. It is generally used with the 'max-items' attribute.
Default Value: false
labelsArray.<Number,String>Sets the labels.
Chart types: Gauge
markersArray.<Object>To create and style the scale markers, which can appear as areas or lines.
Default Value: []
masterStringSets a master scale. The current scale will always be in sync with it's master scale.
Default Value: ''
max-value-factorBooleanRatio from (max-min) interval which will be added to the max value.
Default Value: true
maxDecimals
max-decimals
NumberSets the max number of decimals that will be used to format the values.
Default Value: -1
Chart types: Gauge
maxHeight
max-height
NumberSets the maximum chart height in pixels.
Introduced in: v2.4.1
maxItems
max-items
NumberSets the maximum number of items displayed.
Chart types: Gauge
maxTicks
max-ticks
NumberSets the maximum number of ticks to display on the scale.
Chart types: Gauge
maxValue
max-value
Number, StringSets the maximum scale value.
Accepted Values: ['auto']
maxWidth
max-width
NumberSets the maximum chart width in pixels.
Introduced in: v2.4.1
min-value-factorBooleanRatio from (max-min) interval which will be subtracted to the min value.
Default Value: true
minHeight
min-height
NumberSets the minimum chart height in pixels.
Introduced in: v2.4.1
minWidth
min-width
NumberSets the minimum chart width in pixels.
Introduced in: v2.4.1
minorGuide
minor-guide
ObjectTo style the minor grid lines, which appear between the major grid lines.
Default Value: null
Chart types: Gauge
minorTick
minor-tick
ObjectTo 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
NumberSets 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
normalizeBooleanApplies roundings to scale boundaries in order to get nicer min/max/step values.
Default Value: true
Chart types: Gauge
placementStringSets the placement of the object.
Accepted Values: ['cross', 'default', 'opposite']
Default Value: 'default'
rangedBooleanSets 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
BooleanUsed 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
NumberSets 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
ringObjectStyles the ring that appears around the outer edge of the gauge.
Chart types: Gauge
shortBooleanAutomatically shortens large units (e.g. 1000000 -> 1M)
Default Value: false
Chart types: Gauge
shortUnit
short-unit
StringSpecifies 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
stepNumberThe '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
StringSets the character used to separate thousands.
Default Value: ''
tickObjectUsed to style the scale tick marks.
Default Value: null
Chart types: Gauge
transformObjectTransforms 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
valuesArray.<Number,String>, Number, StringSets the scale values.
Default Value: []
visibleBooleanSets the visibility of the object. Allows you to turn off the object without removing lines of JSON.
Default Value: true
zIndex
z-index
NumberSets 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
zoomingBooleanTo turn on chart zooming on the scale.
Default Value: false
Chart types: Gauge