Plotline (vertical line) in highcharts scatter chart

Question

https://jsfiddle.net/7zL0v5oq/

I would like to have a plotline at today's date. The list can get quite long and in that case it helps with having an oversight. I fear it doesn't work because it is a scatter chart but I don't know what the problem is. I've searched all over the place but everything leads to plotlines, which clearly doesn't work. I would also be thankful if anyone knew, whether there was an easy way to filter my data the way I have it (standard highcharts filtering is deactivated but doesn't really help because of the static y values, so I get a huge, white space in the middle unless I filter at the edges. Thank you in advance for your help.

    data = [{
        "id": 1,
        "release": "Software1",
        "routine_failure_analysis_ended_on": null,
        "sw_maintenance_releases_ended_on": "2014-04-01",
        "sale_ended_on": "2013-04-01",
        "security_vul_support_ended_on": "2015-04-01",
        "service_contract_renewal_ended_on": null,
        "svc_attach_ended_on": null,
        "support_ended_on": "2018-03-31",
        "updated_dates_on": "2012-10-03",
        "created_at": "2018-05-04T18:53:21.301+02:00",
        "updated_at": "2018-05-16T08:36:24.940+02:00"
      },
      {
        "id": 2,
        "release": "Software2",
        "routine_failure_analysis_ended_on": null,
        "sw_maintenance_releases_ended_on": "2019-07-24",
        "sale_ended_on": "2017-07-31",
        "security_vul_support_ended_on": "2020-07-24",
        "service_contract_renewal_ended_on": null,
        "svc_attach_ended_on": null,
        "support_ended_on": "2022-07-31",
        "updated_dates_on": "2015-08-14",
        "created_at": "2018-05-05T04:00:44.170+02:00",
        "updated_at": "2018-05-16T08:36:29.325+02:00"
      },
      {
        "id": 3,
        "release": "Software3",
        "routine_failure_analysis_ended_on": null,
        "sw_maintenance_releases_ended_on": "2018-03-01",
        "sale_ended_on": "2017-03-01",
        "security_vul_support_ended_on": "2018-12-01",
        "service_contract_renewal_ended_on": null,
        "svc_attach_ended_on": null,
        "support_ended_on": "2022-02-28",
        "updated_dates_on": "2016-09-02",
        "created_at": "2018-05-05T04:00:44.401+02:00",
        "updated_at": "2018-05-16T08:36:31.643+02:00"
      }
    ];

    const colors = ["#516", "#1781e3", "#25b252", "#20c997", "#ffc107", "#ff8b2e", "#dd1122"];

    //Change to store y value paired to release/pid
    var change = {};
    //Which y values need to be displayed
    var ticks = [0];

    //Description of events
    var sale = "Sale";
    var support = "Support";
    var svc = " SVC attach";
    var sw = "Software maintenance";
    var routine = "Routine failure analysis";
    var service = "Service contract renewal";
    var security = "Security vulnerability support";

    //Data array for series
    var high = [];
    data.sort(function(a, b) {
      return Date.parse(a.support_ended_on) < Date.parse(b.support_ended_on) ? 1 : -1
    })

    for (var i = 0; i < data.length; i++) {
      var arr = [{
          x: Date.parse(data[i].sale_ended_on),
          y: (i + 1) * 20,
          color: colors[0],
          myValue: sale
        },
        {
          x: Date.parse(data[i].sw_maintenance_releases_ended_on),
          y: (i + 1) * 20,
          color: colors[1],
          myValue: sw
        },
        {
          x: Date.parse(data[i].security_vul_support_ended_on),
          y: (i + 1) * 20,
          color: colors[2],
          myValue: security
        },
        {
          x: Date.parse(data[i].svc_attach_ended_on),
          y: (i + 1) * 20,
          color: colors[3],
          myValue: svc
        },
        {
          x: Date.parse(data[i].routine_failure_analysis_ended_on),
          y: (i + 1) * 20,
          color: colors[4],
          myValue: routine
        },
        {
          x: Date.parse(data[i].service_contract_renewal_ended_on),
          y: (i + 1) * 20,
          color: colors[5],
          myValue: service
        },
        {
          x: Date.parse(data[i].support_ended_on),
          y: (i + 1) * 20,
          color: colors[6],
          myValue: support
        }
      ];
      var key, value;

      line = [{
        x: Date.parse(data[i].sale_ended_on),
        y: (i + 1) * 20
      }, {
        x: Date.parse(data[i].support_ended_on),
        y: (i + 1) * 20
      }]
      //Adding to change list, so we can add release/pid as label to y axis
      key = (i + 1) * 20;
      ticks.push(key);
      if (data[i].pid) {
        value = data[i].pid;
      } else {
        value = data[i].release;
      }
      change[key] = value;
      //Expanding high (which is used for the highcharts series) with arr (all points for one pid)
      if (data[i].pid) {
        high.push({
          label: data[i].pid,
          name: data[i].pid,
          type: 'scatter',
          data: arr
        }, {
          type: 'line',
          data: line,
          linkedTo: ":previous"
        });
      } else {
        high.push({
          label: data[i].release,
          name: data[i].release,
          type: 'scatter',
          data: arr,
          showInLegend: false
        }, {
          type: 'line',
          data: line,
          linkedTo: ":previous"
        });
      }
    }
    Highcharts.chart("container", {
    chart: {
      height: data.length * 75
    },
    credits: {
      enabled: false
    },
    yAxis: {
      title: {
        text: null
      },
      tickPositions: ticks,
      visible: true,
      labels: {
        formatter: function() {
          var value = change[this.value];
          return value !== 'undefined' ? value : this.value;
        }
      }
    },
    xAxis: {
      plotlines: [{
        color: "#dd1122",
        width: 2,
        value: +new Date()
      }],
      type: 'datetime',
    },
    plotOptions: {
      scatter: {
        marker: {
          symbol: 'circle',
          radius: 7,
          lineWidth: 2
        }
      },
      line: {
        enableMouseTracking: false,
        marker: {
          enabled: false
        },
        color: '#bbb',
        lineWidth: 3
      }
    },
    tooltip: {
      formatter: function() {
        var str = '<b>' + this.series.name + '</b><br/>'
        if (this.point.myValue) {
          str += this.point.myValue;
        } else {
          str += "Corrupted data!";
        }
        if (this.point.x < Date.parse(new Date))
          return str += " ended on:<br/>" + Highcharts.dateFormat('%e %b %Y', new Date(this.x));
        else
          return str += " will end on:<br/>" + Highcharts.dateFormat('%e %b %Y', new Date(this.x));

      },
      shared: false
    },
    series: high
    })

Answer 1

You have a typo, use plotLines instead of plotlines :

  xAxis: {
    plotLines: [{
      ...
    }],
    ...
  }

---

Live demo: https://jsfiddle.net/BlackLabel/p3u8ejtb/

API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines