Line

{  "data": ... ,  "mark": "line",  "encoding": ... ,  ...}

Theline mark represents the data points stored in a field with a line connecting all of these points. Line marks are commonly used to depict trajectories or change over time. Unlike most other marks that represent one data element per mark, one line mark represents multiple data element as a single line, akin toarea andtrail.

Note: For line segments that connect (x,y) positions to (x2,y2) positions, please userule marks. For continuous lines with varying size, please usetrail marks.

Documentation Overview

• Line Mark Properties
• Examples
  • Line Chart
  • Multi-series Colored Line Chart
  • Multi-series Line Chart with Varying Dashes
  • Multi-series Line Chart with the Detail Channel
  • Line Chart with Point Markers
  • Line Chart with Invalid Values
  • Connected Scatter Plot (Line Chart with Custom Path)
  • Line interpolation
  • Geo Line
• Line Config

Line Mark Properties

// Single View Specification{  ...  "mark": {    "type": "line",    ...  },  "encoding": ... ,  ...}

An line mark definition can contain anystandard mark properties and the following line interpolation and point overlay properties:

Examples

Line Chart

Usingline with one temporal or ordinal field (typically onx) and another quantitative field (typically ony) produces a simple line chart with a single line.

We can add create multiple lines by grouping along different attributes, such ascolor ordetail.

Multi-series Colored Line Chart

Adding a field to amark property channel such ascolor groups data points into different series, producing a multi-series colored line chart.

We can use text marks andargmax to add labels to each line instead of using legends. Note that here we hide one of the line to avoid collision.

We can further applyselection to highlight a certain line on hover.

Multi-series Line Chart with Varying Dashes

Adding a field tostrokeDash also produces a multi-series line chart.

We can also use line grouping to create a line chart that has multiple parts with varying styles.

Multi-series Line Chart with the Detail Channel

To group lines by a field without mapping the field to any visual properties, we can map the field to thedetail channel to create a multi-series line chart with the same color.

The same method can be used to group lines for a ranged dot plot.

Line Chart with Point Markers

By setting thepoint property of the mark definition totrue or an object defining a property of the overlaying point marks, we can overlay point markers on top of line.

This is equivalent to adding another layer of filled point marks.

Note that the overlay point marks haveopacity = 1 by default (instead of semi-transparent like normal point marks).

Here we create stroked points by setting their\"filled\" tofalse and theirfill to\"white\".

Line Chart with Invalid Values

By default, data points with invalid x- or y-values (null orNaN) will cause break in the lines.

Note that individual points without connecting points will still be invisible by default.

To show individual points without connecting points, you may setstrokeCap to"square":

or overlay it with marker points:

Connected Scatter Plot (Line Chart with Custom Path)

As shown in previous example, the line’s path (order of points in the line) is determined by data values on the temporal/ordinal field by default. However, a field can be mapped to theorder channel for determining a custom path.

For example, to show a pattern of data change over time between gasoline price and average miles driven per capita we useorder channel to sort the points in the line by time field (year). In this example, we also use thepoint property to overlay point marks over the line marks to highlight each data point.

Line interpolation

Theinterpolate property of amark definition can be used to change line interpolation method. For example, we can setinterpolate to"monotone".

We can also setinterpolate to"step-after" to create a step-chart.

For the list of all supportedinterpolate properties, please see theline mark properties section.

Geo Line

By mapping geographic coordinate data tolongitude andlatitude channels of a correspondingprojection, we can draw lines through geographic points.

Line Config

// Top-level View Specification{  ...  "config": {    "line": ...,    ...  }}

Theline property of the top-levelconfig object sets the default properties for all line marks. Ifmark property encoding channels are specified for marks, these config values will be overridden.

The line config can contain anyline mark properties (excepttype,style, andclip).