Need to highlight individual columns in highcharts when clicked

Question

So basically, the above is the reference idea on the webpage, so the top 4 are each individual highchart's chart which has a code like

this.chart2 = new Chart(
      {
        chart: {
          type: 'column',
        },
        title: {
          text: '<b>' + "Title " + '</b>',
        },
        legend: {
          enabled: false,
        },
        tooltip: {
          formatter: function () {
            
            return '<b>' + this.point.name + ':</b> ' + this.point.y + '%' + '<br><b>'  + "Lines to Cover:" +'</b>'+ this.point.l;
          }
        },
        xAxis: {
          categories: ['A','B,'C','D'],
          type: 'CVS',
        },
        yAxis: {
          min:0,
          max:100
        },
        plotOptions: {
          series: {
            events: {
              click: function (event) {
                console.log(this.chart.tooltip.chart.hoverPoint.name)
                console.log("s",this.chart.tooltip.chart.hoverPoint.name.split(' ')[1].toString())
                self.drawComponentChart(this.chart.tooltip.chart.hoverPoint.name)
              }

            }
          },
          column: {
            dataLabels: {
              formatter: function () {
                return this.point.y + '%';
              },
              enabled: true,
              style: {
                color: 'white',
                fontWeight: 'normal'
              },
            },
            showInLegend: true
          },

        },
        series: this.model2,
        //-------export chart-------------//
      exporting:{
        buttons: {
          contextButton: {
              menuItems: ['downloadCSV', 'downloadXLS', 'downloadPDF', 'separator', 'label']
          }
      }
     
      },
// ----------------------------------//
      }
    )

As you can see on click of each column it draws the below chart which is the components of that particular column.

So my need is, I need to find a way to highlight the column I click in any one of the 4 charts above such that there is a way to know which column's components are displayed in the component chart below.

I tried using allowPointSelect but that makes the column grey. I just want a border line upon the column when clicked on and also find a way to highlight only the one clicked column among the 4 charts above. Versions used: "@angular/cli": "~6.2.9", "angular-highcharts": "^6.2.6", "highcharts": "^6.2.0"

Answer 1

You can use allowPointSelect with custom selection logic added using the plotOptions.series.point.events.select() callback function which unselected points from other series (synchronizes them) and when selecting a point the background does not change the background to gray by setting the styles using the property plotOptions.series.states.select

plotOptions: {
  series: {
    allowPointSelect: true,
    states: {
      select: {
        color: undefined,
        borderColor: 'red'
      }
    },
    point: {
      events: {
        select: function() {
          const selected = this,
           group = selected.series.chart.userOptions.selectGroup;

          Highcharts.charts.forEach(chart => {
            if (chart && chart.userOptions.selectGroup === group) {
              const allSelectedPoints = chart.getSelectedPoints();
              allSelectedPoints.forEach(point => {
                if (point !== selected) point.select(false);
              });
            }
          })
        }
      }
    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/89qsk13t/
API: https://api.highcharts.com/highcharts/plotOptions.series.point.events.select
https://api.highcharts.com/highcharts/plotOptions.series.states.select

Angular demo: https://stackblitz.com/edit/highcharts-angular-multi-charts-selection