chart area mousemove

[cscrum]

I found the mouse move event, but it only works if you are touching a data series. I have a chart with 5 lines, and I'd like to capture a mouse move across the chart much like the tooltip or the axis lines that show my current position. Is there a way to access the graph position when moving anywhere within the axes or to tap into the grid lines position?

[xieziyu]

Hi @cscrum ,

Indeed, the MouseEvent provided by ECharts cannot meet your needs, so there is no directly available @Output event in ngx-echarts. Based on your description, you may need to utilize the underlying library that ECharts relies on for rendering: ZRender. Here's a reference example for your consideration:

<div echarts (chartInit)="onChartInit($event)" [options]="options" class="chart"></div>

import { ECharts, zrender } from 'echarts';

export class AppComponent implements onDestroy {
  chartRender?: zrender.ZRenderType

  //... other options ...

  onChartInit(chart: ECharts) {
    this.chartRender = chart.getZr();
    // add event listener
    this.chartRender.on('mousemove', (params) => {
      // TODO: params should be useful
    });
  }

  ngOnDestroy() {
    // remove event listener
    this.chartRender?.off('mousemove');
  }
}

And the official example provided by ECharts: demo

I hope it is helpful.