Click event handler on bar chart in PowerBI embed

Question

I am able to embed Power BI report in Angular app using npm's power-bi-embed package.

I have a bar chart where I have count in Y axis and region in X axis. How do I know user is clicking on bar of which region.

I have tried using relevant event handlers mentioned in this document.

export class AppComponent implements OnInit {
  title = 'powerbi-embed';

  reportConfig: IReportEmbedConfiguration = {
    type: 'report',
    embedUrl: '',
    tokenType: models.TokenType.Aad,
    accessToken: '',
    settings: {
      panes: {
        filters: {
          expanded: false,
          visible: false,
        },
      },
      background: models.BackgroundType.Transparent,
    },
  };
  @ViewChild(PowerBIReportEmbedComponent)
  reportObj!: PowerBIReportEmbedComponent;
  eventHandlersMap = new Map([
    [
      'loaded',
      () => {
        const report = this.reportObj.getReport();
        report.setComponentTitle('Embedded report');
      },
    ],
    ['rendered', (event: any) => console.log('Report has rendered:', event)],
    [
      'error',
      (event?: service.ICustomEvent<any>) => {
        if (event) {
          console.error(event.detail);
        }
      },
    ],
    ['visualClicked', (event) => console.log('Visual clicked:', event)],
    ['pageChanged', (event) => console.log('Page chnaged:', event)],
    ['buttonClicked', (event) => console.log('Button clicked:', event)],
    ['commandTriggered', (event) => console.log('Command triggered:', event)],
    ['dataHyperlinkClicked', (event) => console.log('Hyperlink clicked:', event)],
    ['dataSelected', (event) => console.log('Data selected:', event)],
    ['dataHyperlinkClicked', (event) => console.log('Hyperlink clicked:', event)],
    ['info', (event) => console.log('Tile clicked:', event)]
  ]) as Map<
    string,
    (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null
  >;

  constructor() {}

  ngOnInit() {
    this.embedReport();
  }

  embedReport() {
    this.reportConfig = {
      ...this.reportConfig,
      ...vairables,
    };
  }
}

I am getting below details every time I click on the chart

Only relevant information I ma getting from this are, which page, which report and what kind of chart. Not what data point I have clicked?

Is is technically possible? Am I missing some event handlers?

Answer 1

As suggested by Naren Murali, I tried adding event handler for dataSelected event. It works.

EventHandler hook

['dataSelected', (event) => this.handleDataPointClick(event)],

Console.log