Skip to content

Rule

Rule mark displays each data item as a line segment. Rules can span the whole width or height of the view. Alternatively, they may have specific endpoints.

{
  "data": {
    "sequence": { "start": 0, "stop": 15, "as": "y" }
  },
  "mark": {
    "type": "rule",
    "strokeDash": [6, 3]
  },
  "encoding": {
    "x": { "field": "y", "type": "quantitative" },
    "color": { "field": "y", "type": "nominal" }
  }
}

Channels

TODO, but in principle, the same as in the rect mark.

Properties

TODO, but in principle, the same as in the rect mark plus the following:

size

Type: Number

The stroke width of the lines in pixels.

Default value: 1

minLength

Type: Number

The minimum length of the rule in pixels. Use this property to ensure that very short rules remain visible even when the user zooms out.

Default value: 0

strokeDash

Type: Number[]

An array of of alternating stroke and gap lengths or null for solid strokes.

Default value: null

strokeDashOffset

Type: Number

An offset for the stroke pattern.

Default value: 0

strokeCap

Type: String

The style of stroke ends. Available choices: "butt", "round", and "square".

Default value: "butt"

Examples

Ranged rules

{
  "data": {
    "values": [
      { "y": "A", "x": 2, "x2": 7 },
      { "y": "B", "x": 0, "x2": 3 },
      { "y": "B", "x": 5, "x2": 6 },
      { "y": "C", "x": 4, "x2": 8 },
      { "y": "D", "x": 1, "x2": 5 }
    ]
  },
  "mark": {
    "type": "rule",
    "size": 10,
    "strokeCap": "round"
  },
  "encoding": {
    "y": { "field": "y", "type": "nominal" },
    "x": { "field": "x", "type": "quantitative" },
    "x2": { "field": "x2" }
  }
}