Angular highcharts show selected bar in bar chart

Question

I am using highcharts with angular.

Packages I have included

"highcharts": "^8.0.4",
"highcharts-angular": "^2.4.0"

imports in ts

import * as Highcharts from "highcharts";

Markup on HTML

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions">
</highcharts-chart>

and this is how I am setting chartOptions

private _setChartData(): void {
    let _seriesData: Highcharts.PointOptionsObject[];
    let _categories: any[];
    _seriesData = this._getSeriesData();
    _categories = _seriesData.map((_series) => _series.name);


    this.chartOptions = {
        chart: {
            type: "column"
        },
        title: {
            style: { display: "none" }
        },
        credits: {
            enabled: false
        },
        xAxis: {
            crosshair: true,
            categories: _categories
        },
        yAxis: {
            min: 0,
            title: {
                text: "Production Count"
            }
        },
        tooltip: {
            headerFormat: `<span style="font-size:10px">{point.key}</span><table>`,
            pointFormat: `<tr>
                            <td style="padding:0"><b>{point.y}</b></td>
                          </tr>`,
            footerFormat: "</table>",
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            showInLegend: false, data: _seriesData, type: "column",
            events: { click: (data: any) => this._chartEventHandler(data.point.options) }
        }]
    };
}

and here is _getSeriesData data

private _getSeriesData(): Highcharts.PointOptionsObject[] {
    const data = getData();
    const _seriesData: Highcharts.PointOptionsObject[] = [];
    data.forEach((_group, index: number) => {
        _seriesData.push({
            name: _group.name || "Unknown",
            y: _group.count,
            // selected : index === 1 ? true : false
        });
    });
    return _seriesData;
}

This works fine.

I want to highlight the selcted bar as it shows as of on hover.

There is way to mark bar as selected but it just change the bar color to gray, i want to the highlight effect.

Is there any way to do this?

Answer 1

Enable allowPointSelect option and use brightness property in states.select:

  plotOptions: {
    column: {
      ...,
      allowPointSelect: true,
      states: {
        select: {
          color: '',
          brightness: 0.1
        }
      }
    }
  }

---

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5008/

API Reference:

https://api.highcharts.com/highcharts/series.column.states.select

https://api.highcharts.com/highcharts/series.column.allowPointSelect