Connect labels with dots example

labels-lines.vg.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "data": [
    {
      "name": "main",
      "values": [
        {"id": 1, "timestamp": 1643221757, "name": "name 1"},
        {"id": 2, "timestamp": 1643521757, "name": "name 2"},
        {"id": 3, "timestamp": 1643721757, "name": "name 3"},
        {"id": 4, "timestamp": 1643721757, "name": "name 4"}
      ]
    }
  ],
  "scales": [
    {
      "name": "timeScale",
      "domain": {"data": "main", "field": "timestamp"},
      "type": "time",
      "range": "width"
    }
  ],
  "axes": [
    {
      "scale": "timeScale",
      "orient": "bottom",
      "offset": {"signal": "-height/2"}
    }
  ],
  "marks": [
    {
      "name": "datapoints",
      "from": {"data": "main"},
      "type": "symbol",
      "shape": "circle",
      "zindex":  1,
      "encode": {
        "update": {
          "x": {"scale": "timeScale", "field": "timestamp"},
          "y": {"signal": "height/2"}
        }
      }
    },
    {
      "name": "datalabels",
      "from": {"data": "datapoints"},
      "type": "text",
      "encode": {
        "update": {
          "text": {"signal": "datum.datum.name"},
          "align": {"value": "right"},
          "x": {"field": "x"},
          "y": {"field": "y", "offset": -20}
        }
      },
      "transform": [
        {
          "type": "label",
          "avoidMarks": ["datapoints"],
          "avoidBaseMark": true,
          "padding": 30,
          "size": {"signal": "[width, height]"},
          "anchor": [
            "top",
            "bottom",
            "top-left",
            "bottom-left",
            "top-right",
            "bottom-right",
            "left",
            "right"
          ],
          "offset": [50]
        }
      ]
    },
    {
      "name": "line",
      "from": {"data": "datalabels"},
      "type": "rule",
      "zindex": 0,
      "encode": {
        "update": {
          "x": {
            "signal": "datum.bounds.x1"
          },
          "y": {
            "signal": "datum.bounds.y2"
          },
          "x2": {
            "signal": "datum.datum.x"
          },
          "y2": {
            "signal": "datum.datum.y"
          }
        }
      }
    },
    {
      "name": "emphline",
      "from": {"data": "datalabels"},
      "type": "rule",
      "zindex": 0,
      "encode": {
        "update": {
          "x": {
            "signal": "datum.bounds.x1"
          },
          "y": {"signal": "datum.bounds.y2"},
          "x2": {
            "signal": "datum.bounds.x2"
          }
        }
      }
    }
  ]
}