graph » scale-k » guide » media-rules

media-rules

[ root » graph » scale-k » guide » 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
alphaNumberSets the opacity on the marker, with 0 being fully transparent and 1 being fully opaque. Note that decimal value requires the leading 0.
Default Value: 1
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
classStringSets a class value on the object.
Default Value: null
dataN
data-n
AnyPrefix attribute or array using "data-" to define a custom token.
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'
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
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
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
shadowBooleanSets whether the object's shadow is visible or not. Has limited effect on HTML5 implementation.
Default Value: false
shadowAlpha
shadow-alpha
NumberSets 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
NumberSets the angle of the shadow underneath the object.
Default Value: 45
shadowBlur
shadow-blur
NumberSets the blur effect size for the shadow of the object. Has limited effect on HTML5 implementation.
Default Value: 0
shadowColor
shadow-color
StringSets the color of the shadow of the object.
Default Value: '#999'
shadowDistance
shadow-distance
NumberSets the distance between the shadow and the object.
Default Value: 2
visibleBooleanSets the visibility of the object. Allows you to turn off the object without removing lines of JSON.