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
active	Boolean	Sets whether the zoom level is preserved when a chart is altered or reloaded.
alpha	Number	Sets 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	String	Sets 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
border	Number	Sets 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	Number	Sets 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	Number	Sets the object's bottom border style. Accepts solid, dashed, and dotted styles. Default Value: ''
borderColor border-color	String	Sets the border color of the object. Default Value: '#000'
borderLeft border-left	Number	Sets the object's left border style. Accepts solid, dashed, and dotted styles.
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
borderRight border-right	Number	Sets the object's right border style. Accepts solid, dashed, and dotted styles. Default Value: ''
borderTop border-top	Number	Sets the object's top border style. Accepts solid, dashed, and dotted styles. Default Value: ''
borderWidth border-width	Number	Sets the border width of the object. Default Value: 0
centerRef center-ref	Boolean	Sets the (0,0) x/y coordinates as the center of the box (instead of the top-left corner). Default Value: false
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.
id	String	Sets the id of the object. Default Value: ''
maxHeight max-height	Number	Sets the maximum chart height in pixels. Introduced in: v2.4.1
maxWidth max-width	Number	Sets the maximum chart width in pixels. Introduced in: v2.4.1
minHeight min-height	Number	Sets the minimum chart height in pixels. Introduced in: v2.4.1
minWidth min-width	Number	Sets the minimum chart width in pixels. Introduced in: v2.4.1
preserveZoom preserve-zoom	Boolean	Sets whether to enable zooming when clicking and dragging on an area of the chart.
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
shared	Boolean	Enables shared zooming when there are mulitple charts in a graphset.
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