This website is for Vega-Lite v4. Go to the main Vega-Lite homepage for the latest release.

Customizing Selection Mark

Edit this page

Every interval selection also adds a rectangle mark to the visualization, to depict the extents of the selected region. The appearance of this mark can be customized with the following properties, specified under mark.

Property Type Description
cursor String

The mouse cursor used over the interval mark. Any valid CSS cursor type can be used.

fill Color

The fill color of the interval mark.

Default value: "#333333"

fillOpacity Number

The fill opacity of the interval mark (a value between 0 and 1).

Default value: 0.125

stroke Color

The stroke color of the interval mark.

Default value: "#ffffff"

strokeOpacity Number

The stroke opacity of the interval mark (a value between 0 and 1).

strokeWidth Number

The stroke width of the interval mark.

strokeDash Number[]

An array of alternating stroke and space lengths, for creating dashed or dotted lines.

strokeDashOffset Number

The offset (in pixels) with which to begin drawing the stroke dash array.

Examples

For example, the spec below imagines two users, Alex and Morgan, who can each drag out an interval selection. To prevent collision between the two selections, Morgan must press the shift key while dragging out their interval (while Alex must not). Morgan’s interval is depicted with the default grey rectangle, and Morgan’s with a customized red rectangle.