Highcharts - Линейный график отмечает выбранную точку

Question

У меня есть line-chart в моем приложении angular. Что мне нужно сделать, так это когда я нажимаю на любую точку графика, чтобы отметить эту точку, чтобы отличить guish от остальных. Ниже моя конфигурация диаграммы:

highcharts = Highcharts;
  chartOptions = {
    chart: {
       type: "line"
       },
    credits: {
      enabled: false
    },
    title: {
      enabled: true,
      text: "Reach +1/" + this.xAxis.name,
      verticalAlign: "top",
      align: "left"
    },
    tooltip: {
      formatter: function (data) {
          return data.chart.userOptions.xAxis.title.text + ": " + this.x.toFixed(4) + "<br/>" +
              "Reach: " + this.y.toFixed(4);
      }
  },
    xAxis: {
      title: {
        text: this.xAxis.name
      },
    },
    yAxis: {
       title: {
          text: "Reach"
       }
    },
    series: [
      {
        name: this.xAxis.name,
        data: null,
        allowPointSelect: true,
        point: {
          events: {
            click: function(event) {
              this.yPoint = event.point.y;
              this.xPoint = event.point.x;
              this.filterOptimizationResults(this.xPoint, this.yPoint);
              }.bind(this)
            },
          },
          state: {
            select: {
              enabled: true
            }
          }
        }
      ]
    };

Ниже я делюсь экраном диаграммы для справки:

Итак например, если y выбрать точку (25,75), мне нужно, чтобы эта точка была обведена.

Answer 1

Вот базовый c пример того, как реализовать переключение точек с помощью функций point.update и events.click .

Демонстрация: https://jsfiddle.net/BlackLabel/sh4o3enL/

point: {
  events: {
    click() {
      let point = this;

      if (point.marker && point.marker.enabled) {
        point.update({
          marker: {
            enabled: false
          }
        })
      } else {
        point.update({
          marker: {
            enabled: true
          }
        })
      }
    }
  }
}

API: https://api.highcharts.com/class-reference/Highcharts.Point#update

API: https://api.highcharts.com/highcharts/series.line.point.events.click