Value by clicked index

[Stéphane Lessard]

Hi Syncfusion Support,

I have two very specific behaviors to achieve with the “Chart” component and I would like to know if it is possible. To simply put it, I want to be able to click ANYWHERE on the graph and get the index of that point. I am already aware of the “pointClick” event, but it only works if you click directly on a specific “data point”.

First of all, allow me to concretely explain my query with the graph image below. If we look at the purple line in the graph, we can see that there are only 3 “specific” points that you can get the “pointClick” event to trigger on: (x: 1, y: 0.2mg) (x: 9, y: 0.1mg) (x: 18, y: 0.1mg). As an example, I would like to be able to click on the index (x: 9, y: 0.900mg) and retrieve that index information to display it somewhere else in my page. That index could be anywhere on my graph and it would not be limited to a specific point.

Second of all, I would also like to be able to click anywhere on my graph and draw a vertical line to retrieve any indexes that cross that line. Allow me to explain this second query again with the image below. After clicking the graph where the mouse is positioned in the image, the red line appears and I would like to retrieve the 3 indexes that cross that line (1 index for each colored line).

 

Thank you

Attachment: SyncFusionClickClart_981ca21a.zip

[Srihari Muthukaruppan]

Hi Remi, 

 

We have analysed your query. From that, we would like to let you know that it is not possible to achieve your requirement since the chartMouseClick may occurs in between two points which will make it difficult to find the index based on the mouseClick. Regarding the vertical line we suggest you to use trackball to achieve your requirement. 

 

Sample: https://stackblitz.com/edit/angular-nkvwrs?file=app.component.html 

 

Screenshot: 

 

 

If still this is not your exact requirement. Kindly share the use case scenario for the reported scenarios which will be helpful for further analysis and provide you solution sooner. 

 

Regards, 

Srihari M 

[Stéphane Lessard]

Hi,

I tested a few specifc scenarios with the solution you provided and I realized that it does not meet my requirement.

However, I searched the documentation a bit more and found the "Crosshair and trackball" section. There is a sub section about adding a tooltip for the axis and it shows the current X and Y in small boxes while moving the mouse on the graph. Is there a way to retrieve the X value?

Here is the documentation link:

https://ej2.syncfusion.com/angular/documentation/chart/cross-hair-and-track-ball/#tooltip-for-axis

The image I provided in this response explains what I'm trying to retrieve. I tried to search in the properties of the CHART object, but it has way to many to find it.

Thank you

Attachment: CaptureCrossHairChart_d7d3efd3.zip

[Srihari Muthukaruppan]

Hi Remi, 

We have analysed your query. From that, we would like to let you know that we can achieve your requirement using chartMouseClick event in the chart. We have also prepared a sample based on your requirement. In which we have stored xvalue on each mouse click. Please find the sample and screenshot below. 

 

Sample: https://stackblitz.com/edit/angular-nkvwrs-yy6fkl?file=app.component.ts 

 

Code Snippet: 

App.component.html: 

 

<ejs-chart #chart  (chartMouseClick)="mouseClick($event)"  [crosshair]="crosshair"> 

// add your additional code here 

</ejs-chart> 

 

App.component.ts: 

// add your additional code here 

 

public mouseClick(args: IMouseEventArgs): void { 

    if (args.target.indexOf("_ChartAreaBorder" || "_MajorGridLine_") != -1) { 

      let mouseX = args.x; 

      let mouseY = args.y; 

      let xAxis = this.chart.series[0]["xAxis"]; 

      let yAxis = this.chart.series[0]["yAxis"]; 

      let rect = this.chart.series[0]["clipRect"]; 

      let xVal = mouseX - rect.x; 

      let yVal = mouseY - rect.y; 

      let xSize = rect.width; 

      let ySize = rect.height; 

      let actualXValue = !xAxis.isInversed ? xVal / xSize : 1 - xVal / xSize; 

      actualXValue = 

        actualXValue * xAxis.visibleRange.delta + xAxis.visibleRange.min; 

      let actualYValue = yAxis.isInversed ? yVal / ySize : 1 - yVal / ySize; 

      actualYValue = 

        actualYValue * yAxis.visibleRange.delta + yAxis.visibleRange.min; 

      let xDate = new Date(actualXValue); 

      console.log(xDate); 

    } 

  } 

// add your additional code here 

 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M