Altair: Line Chart with Stroked Point Markers

Question

I'm trying to create a line chart with point markers in Altair. I'm using the multi-series line chart example from Altair's documentation and trying to combine it with the line chart with stroked point markers example from Vega-Lite's documentation.

Where I'm confused is how to handle the 'mark_line' argument. From the Vega example, I need use "point" and then set "filled" to False.

  "mark": {
    "type": "line",
    "point": {
      "filled": false,
      "fill": "white"
    }
  },

How would I apply that in Altair? I figured out that setting 'point' to 'True' or '{}' added a point marker, but confused on how to get the fill to work.

source = data.stocks()

alt.Chart(source).mark_line(
    point=True
).encode(
    x='date',
    y='price',
    color='symbol'
)

score 8 · Accepted Answer · answered Mar 24 '20 at 20:55

8

You can always pass a raw vega-lite dict to any property in Altair:

source = data.stocks()

alt.Chart(source).mark_line(
    point={
      "filled": False,
      "fill": "white"
    }
).encode(
    x='date',
    y='price',
    color='symbol'
)

or you can check the docstring of mark_line() and see that it expects point to be an OverlayMarkDef() and use the Python wrappers:

alt.Chart(source).mark_line(
    point=alt.OverlayMarkDef(filled=False, fill='white')
).encode(
    x='date',
    y='price',
    color='symbol'
)

answered Mar 24 '20 at 20:55

jakevdp

77,104
11
125
160

1

I have a follow up question. If i search 'mark_line' on the documentation i find that all of the parameters are set to 'Undefined'. Here is a link to what I mean. https://altair-viz.github.io/user_guide/generated/toplevel/altair.Chart.html#altair.Chart.mark_line . How is one supposed to find the appropriate types for the parameters? – eitanlees Mar 24 '20 at 21:12
I figured it out, mark_line > MarkDef > OverlayMarkDef. I had to dig deeper! – eitanlees Mar 24 '20 at 21:18
1

It has a link to [``MarkDef``](https://altair-viz.github.io/user_guide/generated/core/altair.MarkDef.html#altair.MarkDef) which has more details on the parameters. – jakevdp Mar 24 '20 at 21:18

score 4 · Answer 2 · answered Mar 24 '20 at 20:54

You can pass further information to the point parameter similar to how the vega-lite is specified.

import altair as alt
from vega_datasets import data

source = data.stocks()

alt.Chart(source).mark_line(
    point={
      "filled": False,
      "fill": "white"
    }
).encode(
    x='date',
    y='price',
    color='symbol'
)

Altair: Line Chart with Stroked Point Markers

2 Answers2