Add data with different styling to Vega Lite line chart

Question

I have a line plot with 3 different series which works great in terms of colour coding, legend labeling, etc. What i want to now do is at a dashed line at a particular y-value across the whole plot. Previously I would normally do this by just adding another trivial dataset and setting the plot styling of that one separately, however I'm a bit stuck on doing that in VL.

So far the furthers I've gotten is this plot which is an attempt to use layers to add the extra two points to draw the line at y = 100%. However, the points aren't joined for some reason and I would also like to be able to remove that series from the legend but i'm not entirely sure how (first time working with legends).

I also thought perhaps the way to go is to edit the y-grid, but I would still want the y-ticks where they are currently, just a line across at y = 100, and i'm not sure how to be that selective with the axis.

Any/all help appreciated.

EDIT: Oh also in that plot I would want the y-label to just show '%' not the other dummy series.

jakevdp jakevdp · Accepted Answer · 2019-12-12T03:56:56

If you want to add a line spanning the chart at a particular y value, you can use a rule mark and set the y value explicitly; essentially add a layer like this:

{
  "mark": "rule",
  "encoding": {"y": {"value": 100}}
}

Here's what your chart looks like with this addition (vega editor):

{
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {
      "grid": false,
      "labelAngle": 0,
      "labelFont": "museo-sans-300",
      "labelFontSize": 15,
      "labelFontWeight": "normal",
      "titleFont": "museo-sans-300",
      "titleFontSize": 15,
      "titleFontWeight": "normal"
    }
  },
  "data": {"name": "data"},
  "layer": [
    {
      "mark": {
        "type": "line",
        "interpolate": "monotone",
        "point": {"filled": true, "stroke": "white", "size": 100}
      },
      "title": {
        "text": "",
        "anchor": "middle",
        "font": "museo-sans-300",
        "fontSize": 20,
        "offset": 0,
        "fontWeight": "normal"
      },
      "encoding": {
        "tooltip": [
          {"field": "%", "type": "quantitative"},
          {"field": "metric", "type": "nominal"}
        ],
        "x": {
          "field": "date",
          "type": "temporal",
          "timeUnit": "monthdate",
          "axis": {"title": null, "tickCount": "day"}
        },
        "y": {
          "field": "%",
          "type": "quantitative",
          "axis": {"titleX": -50},
          "scale": {"domain": [0, 150]}
        },
        "color": {
          "field": "metric",
          "type": "nominal",
          "legend": {
            "labelFont": "museo-sans-300",
            "labelFontSize": 15,
            "title": null,
            "offset": 20,
            "rowPadding": 7.5
          }
        }
      }
    },
    {"mark": "rule", "encoding": {"y": {"value": 100}}}
  ],
  "width": 750,
  "height": 200,
  "autosize": {"type": "none"},
  "padding": {"top": 30, "left": 75, "right": 250, "bottom": 30},
  "datasets": {
    "data": [
      {"date": "2019-12-06", "metric": "Linehaul util. %", "%": 29},
      {"date": "2019-12-10", "metric": "Linehaul util. %", "%": 53},
      {"date": "2019-12-11", "metric": "Linehaul util. %", "%": 62},
      {"date": "2019-12-12", "metric": "Linehaul util. %", "%": 62},
      {"date": "2019-12-06", "metric": "Daily recovery %", "%": 97.1},
      {"date": "2019-12-09", "metric": "Daily recovery %", "%": 82.3},
      {"date": "2019-12-10", "metric": "Daily recovery %", "%": 76.7},
      {"date": "2019-12-11", "metric": "Daily recovery %", "%": 63.8},
      {"date": "2019-12-12", "metric": "Daily recovery %", "%": 91.9},
      {"date": "2019-12-06", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-07", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-08", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-09", "metric": "30d rolling recovery %", "%": 77.9},
      {"date": "2019-12-10", "metric": "30d rolling recovery %", "%": 77.7},
      {"date": "2019-12-11", "metric": "30d rolling recovery %", "%": 74.7},
      {"date": "2019-12-12", "metric": "30d rolling recovery %", "%": 74.7}
    ]
  }
}

Note: the reason your initial approach didn't work is because the "%T" field is undefined for many of the points, and no line is drawn between undefined points. You could fix this by either filtering the undefined points, or drawing the line layer using a distinct dataset, but using a rule mark is simpler overall.

Add data with different styling to Vega Lite line chart

1 Answers