Vega-LiteTest Gallery

Line charts

Simple time-series line chart showing Google's stock price over time.

Stock prices over time with point markers. This uses a line mark's point property to simplify the process (the alternative would have been to create two layers, one of the line and one for the point markers).

Stock prices over time with stroked point markers.

Multi-series line chart showing stock prices of five tech companies over time.

Repeated layers to show different weather measures.

Repeated layers to create a halo effect around overlapping lines.

Slope graph showing the change in yield for different barley sites. It makes the error in the year labels for the Morris site obvious. Slope graphs, proposed by Edward Tufte alow comparison of values in a list, typically over time.

Google's stock price over time. This is simply a normal line chart but with values quantised in order to emphasise discrete changes.

Google's stock price over time, smoothed with monotonic interpolation. Smoothing is useful when you wish to separate a signal from 'noise' (such as errors or unimportant minor fluctuations).

Line chart with conditional grid dash.

Line chart with conditional axis and grid.

A connected scatterplot can be created by customizing line order and adding point marker in the line mark definition. Connected scatterplots are useful when you wish to show how a relationship between two variables changes over time or some other continuous variable.

Bump chart showing sequential transition between three states over time. More commonly used to show changes in rank over time.

Stock prices of five tech companies over time double encoding price with vertical position and line thickness. This uses the 'trail' mark that shows a line with a thickness along its length proportional to some variable.

Comet chart showing two-state transitions.

Line chart with markers and invalid values.

Carbon dioxide in the atmosphere.

Line chart showing ranks over time for thw World Cup 2018 Group F teams. This is computed using a 'window transform'.

Sine and cosine curves with the sequence generator

Line chart using stroke dash to distinguish categories.

Using stroke dash to distinguish observed from predicted data in a line chart.