Line Chart with Overlaying Point Markers

By setting the point property of the line mark definition to an object defining a property of the overlaying point marks, we can overlay point markers on top of line. Here we set the point color to "red" and set the line color to "green".

Notes: (1) This is equivalent to adding another layer of point marks. (2) While "point" marks are normally semi-transparent, the overlay point marker has opacity = 1 by default.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "mark": {"type": "line", "color": "green", "point": {"color": "red"}},
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
}