Connect smoothly Actual + Forecast line in Vega

Question

I'm dealing with a common business scenario where I want to showcase both actual and forecasted values on a chart. However, I'm having difficulties in smoothly connecting these two lines in my visualization. Could you please advise on techniques I could use to achieve this in Vega/Vega-Lite?

Many thanks!

Code sample:

    {
      "$schema": "https://vega.github.io/schema/vega/v5.json",
      "width": 400,
      "height": 200,
      "padding": 5,
    
      "data": [
        {
          "name": "table",
          "values": [
            {"x": "A", "y": 28, "type":"Actual"},
            {"x": "B", "y": 55, "type":"Actual"},
            {"x": "C", "y": 43, "type":"Actual"},
            {"x": "D", "y": 91, "type":"Forecast"},
            {"x": "E", "y": 81, "type":"Forecast"},
            {"x": "F", "y": 53, "type":"Forecast"},
            {"x": "G", "y": 19, "type":"Forecast"},
            {"x": "H", "y": 87, "type":"Forecast"},
            {"x": "I", "y": 52, "type":"Forecast"},
            {"x": "J", "y": 48, "type":"Forecast"}
          ],
          "transform": [
           
            {
              "type": "formula",
              "expr": "datum.type==='Actual'?datum.y:null",
              "as": "actual"
            },
            {
              "type": "formula",
              "expr": "datum.type==='Forecast'?datum.y:null",
              "as": "forecast"
            }
          ]
        }
      ],
    
      "scales": [
        {
          "name": "x",
          "type": "band",
          "range": "width",
          
          "domain": {"data": "table", "field": "x"}
        },
        {
          "name": "y",
          "type": "linear",
          "range": "height",
          "nice": true,
          "zero": true,
          "domain": {"data": "table", "field": "y"}
        }
      ],
    
      "axes": [
        {"orient": "bottom", "scale": "x"},
        {"orient": "left", "scale": "y"}
      ],
    
      "marks": [
        {
          "type": "line",
          "from": {"data": "table"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale":"y","field": "actual"},
              "stroke": {"value": "black"},
              "strokeWidth": {"value": 2}
            }
          }
        },
        {
          "type": "line",
          "from": {"data": "table"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale":"y","field": "forecast"},
              "stroke": {"value": "gray"},
              "strokeWidth": {"value": 2},
              "strokeDash": {"value": [3,5]}
            }
          }
        }
 ]
}

Answer 1

This is the technique but you have to duplicate your last actual to get the lines to join. You can do this anywhere though.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"x": "A", "y": 28, "type": "Actual"},
        {"x": "B", "y": 55, "type": "Actual"},
        {"x": "C", "y": 43, "type": "Actual"},
        {"x": "C", "y": 43, "type": "Forecast"},
        {"x": "D", "y": 91, "type": "Forecast"},
        {"x": "E", "y": 81, "type": "Forecast"},
        {"x": "F", "y": 53, "type": "Forecast"},
        {"x": "G", "y": 19, "type": "Forecast"},
        {"x": "H", "y": 87, "type": "Forecast"},
        {"x": "I", "y": 52, "type": "Forecast"},
        {"x": "J", "y": 48, "type": "Forecast"}
      ]
    },
    {
      "name": "a",
      "source": "table",
      "transform": [{"type": "filter", "expr": "datum.type == 'Actual'"}]
    },
    {
      "name": "b",
      "source": "table",
      "transform": [{"type": "filter", "expr": "datum.type == 'Forecast'"}]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "range": "width",
      "domain": {"data": "table", "field": "x"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "y"}
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "x"},
    {"orient": "left", "scale": "y"}
  ],
  "marks": [
    {
      "type": "line",
      "from": {"data": "a"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "x"},
          "y": {"scale": "y", "field": "y"},
          "stroke": {"value": "black"},
          "strokeWidth": {"value": 2}
        }
      }
    },
    {
      "type": "line",
      "from": {"data": "b"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "x"},
          "y": {"scale": "y", "field": "y"},
          "stroke": {"value": "gray"},
          "strokeWidth": {"value": 2},
          "strokeDash": {"value": [3, 5]}
        }
      }
    }
  ]
}