graph » preview » media-rules

media-rules

[ root » graph » preview » 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
activeObjectSets the styling for the active area of the preview chart.
adjustLayout
adjust-layout
BooleanSet to prevent plotarea from overlapping with preview.
Default Value: null
alphaNumberSets the opacity of the background or plotarea of the preview.
asyncBooleanDetaches the action of the preview (zooming) to the actual zooming of the scales, leaving to the user the option to perform other logic which depends on the preview state.
Default Value: false
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
borderColor
border-color
StringSets the border color of the object.
Default Value: '#000'
borderWidth
border-width
NumberSets the border width of the object.
Default Value: 0
classStringSets a class value on the object.
Default Value: null
dataN
data-n
AnyPrefix attribute or array using "data-" to define a custom token.
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'
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: ''
handleObjectSets the styling for the handle portions of the preview chart. Use the handle-left, handle-right, handle-top, and/or handle-bottom object(s) in the preview object. To apply the same styling to all of the handles, use the handle object.
handleBottom
handle-bottom
ObjectSets the styling for the bottom handle portion of the preview chart. To apply the same styling to all of the handles, use the handle object.
handleLeft
handle-left
ObjectSets the styling for the left handle portion of the preview chart. To apply the same styling to all of the handles, use the handle object.
handleRight
handle-right
ObjectSets the styling for the right handle portion of the preview chart. To apply the same styling to all of the handles, use the handle object.
handleTop
handle-top
ObjectSets the styling for the top handle portion of the preview chart. To apply the same styling to all of the handles, use the handle object.
heightNumberSets the object's height.
Default Value: 0
idStringSets the id of the object.
Default Value: ''
lineColor
line-color
StringSets 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
NumberCan 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
NumberCan 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
StringSets the line style of the object.
Accepted Values: ['dashdot', 'dashed', 'dotted', 'solid']
Default Value: ''
lineWidth
line-width
NumberSets the line width of the object, applicable on non-closed shapes. See also border-width for closed shapes.
Default Value: 0
liveBooleanSets whether the chart is updated when the preview active area is being moved. Default is false for classic theme and true for light/dark themes. The graph will update only when a the mouse is released.
Default Value: false
marginNumber, StringSets the object's margin/s from the top-left of the chart.
Accepted Values: ['dynamic']
maskObjectSets the styling for the background area of the preview chart.
maxHeight
max-height
NumberSets the maximum chart height in pixels.
Introduced in: v2.4.1
maxWidth
max-width
NumberSets the maximum chart width in pixels.
Introduced in: v2.4.1
minDistance
min-distance
NumberSets the minimum width and height of preview's active area.
minDistanceX
min-distance-x
NumberSets the minimum width of preview's active area.
Default Value: 0
minDistanceY
min-distance-y
NumberSets the minimum height of preview's active area.
Default Value: 0
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
offsetX
offset-x
NumberSets an x-offset to apply when positioning the object.
offsetY
offset-y
NumberSets an y-offset to apply when positioning the object.
preserveZoom
preserve-zoom
BooleanSets whether the zoom level is preserved when a chart is altered or reloaded.
typeBooleanSets the stock preview chart type.
Accepted Values: ['area', 'line']
Default Value: 'area'
visibleBooleanSets the visibility of the object. Allows you to turn off the object without removing lines of JSON.
Default Value: true
widthNumberSets the object's width.
xNumberSets the X position of the object.
yNumberSets the Y position of the object.