Highlight area in highcharts

Question

I need select area near column. How to make the region and column stand out when you click, as when you hover over it.

This is my example: 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'
                    }
                }
            },
            ...
        },
        ...
    }
});

user_12938545 · Answer

You'll need to add an event handler for the click:

                series: {
                    cursor: 'pointer',

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

Inside this event you'll need to handle the area selection, there is a similar post here. The selected area is a category. (API reference)

API documentation for click event: https://api.highcharts.com/highcharts/plotOptions.area.point.events.click

user_10522842 · Answer

You can render the plotBands as a crosshair and use the select for highlighting the point inside the click callback.

Demo: 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 to style the selected point: https://api.highcharts.com/highcharts/series.line.states.select

Highlight area in highcharts

2 Answers