Выделите область в высоких чартах

Question

Мне нужно выбрать область возле столбца. Как выделить область и столбец при нажатии, как при наведении на него курсора.

Это мой пример: https://jsfiddle.net/alexserden/wq6j0tnp/9/

$(function () {
    let chart = Highcharts.chart('bar', {
        tooltip: {
            shared: true,
            hideDelay:100,
            useHTML: true,
            outside: true,
            style: {
                fontSize: "13px",
                color: '#505050'
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: false,
                    style: {
                        fontSize: '13px',
                        fontWeight: 'bold',
                        textOutline: undefined,
                        color: '#505050'
                    }
                }
            },
            ...
        },
        ...
    }
});

Answer 1

Вы можете визуализировать plotBands как перекрестие и использовать select для выделения точки внутри обратного вызова щелчка.

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

point: {
  events: {
    click() {
      let chart = this.series.chart;

      chart.series.forEach(s => {
        s.points.forEach(p => {
          if(p.category === this.category) {
            p.select()
          }
        })
      })
      chart.xAxis[0].update({
        plotBands: [{
            from: this.x -0.5,
          to: this.x + 0.5,
        }]
      })
    }   
  }
},

API: https://api.highcharts.com/highcharts/xAxis.plotBands

API для стилизации выбранной точки: https://api.highcharts.com/highcharts/series.line.states.select

Answer 2

Вам нужно добавить обработчик событий для клика:

                series: {
                    cursor: 'pointer',

                    marker: {
                        enabled: false
                    },
                    point: {
                      events: {
                          click: function () {
                              // Handle selection
                          }
                      },
                    }
                }

Внутри этого события вам нужно будет обработать выделение области, здесь есть похожая запись здесь, Выбранная область является категорией. ( Справочник по API )

Документация по API для события щелчка: https://api.highcharts.com/highcharts/plotOptions.area.point.events.click