Catching click event in line graph(ngx-echarts)

Question

I am using echarts Angular version- ngx-echarts in my project. I want to catch click event done on a line graph. chartClick or any of the mouse event of ngx-echarts library is not working for line graphs but they are working for barGraphs. How can I catch click events in line graph using ngx-echarts

<div echarts [options]="chartOption" 
    (chartClick)="onChartEvent($event, 'chartClick')">
</div>

onChartEvent(event: any, type: string) {
    console.log('chart event:', type, event);
}

Logical entity is not entering the onChartEvent function even when click is performed

Answer 1

In the line chart the 'chartClick' event gets fired only if you click on the points of the lines.

Answer 2

You can do it by this way. when you build your options, in series object populate:

series: [
                { // your bar
                    type: 'bar',
                    barWidth: '30%',
                    data: myData
                },
                { // shadow bar
                    type: 'bar',
                    barWidth: '30%',
                    itemStyle: {
                        // transparent bar
                        normal: { color: 'rgba(0, 0, 0, 0)' }
                    },
                    barGap: '-100%',
                    data: myDataShadow,
                    animation: false
                }
]

Where myDataShow is a copy of myData.

I recommend you put the biggest value in all positions of myDataShadow to make all bar clickable.

Answer 3

Please go ahead and add the symbol, with that you can click over the point and the event would be triggered. Replace for example triangle over none as shown below:

private mySeries = {
   type: 'line',
   name: 'prod',
   data: myData, 
   symbol: 'triangle',
   itemStyle: {
      color: '#35b53a'
   }
};