Search code examples
angularapexcharts

Apexcharts right click get element

I am trying to get the chart element so I can modify it with right click. I am using angular framework. Apexcharts has build in function of left click which is great, but not for right click.

So what I thought to do is add the right click event to the chart element:

<apx-chart (contextmenu)="onRightClick($event)"
              [series]="chartOptions[i].series"
              [chart]="chartOptions[i].chart"
              [colors]="chartOptions[i].colors"
              [title]="chartOptions[i].title"
              [yaxis]="commonOptions.yaxis"
              [dataLabels]="commonOptions.dataLabels"
              [markers]="commonOptions.markers"
              [stroke]="commonOptions.stroke"
              [grid]="commonOptions.grid"
              [xaxis]="commonOptions.xaxis"
              [tooltip]="commonOptions.tooltip"
            ></apx-chart>

I have no idea how to reach, where to find and ID, or the chart object it self. I can see "ng-reflect-series" etc., but I am stuck there. This is where I can see the ng-reflect-series:

    onRightClick(event) {
        console.log("right clicked on me " + event.currentTarget.attributes);
        return false;
    }

Andy advice?

Solution

  • The event name is contextmenu. So, your html template code can be something like this:

    <div id="chart" class="chart" #chart (contextmenu)="onRightClick(chart, chart.id, $event)"></div>

    $event is an optional parameter but we also give #chart element to the function, so we can read out the element and the chartId. As for getting the obj of the chart I guess you'll have to read that from Apex docs how to read it.

    onRightClick(chart: HTMLElement, chartId: string, event?: Event) {
  console.log(event)
  console.log(chart)
  console.log(chartId)
}

    Here is a working example: https://stackblitz.com/edit/apexcharts-bar-chart-issue-qynzcv?file=src%2Fapp%2Fchart%2Fchart.component.ts