FlexChart Line symbols hover highlight

FlexChart Line symbols hover highlight

Posted by: metrik on 8 May 2020, 11:07 am EST

• 

  metrik

  • Post Options:
  • Link
    Copy

  Posted 8 May 2020, 11:07 am EST - Updated 3 October 2022, 4:20 pm EST

  Hello,

  I have found the following topic discussing how to highlight a line symbol on mouse hover: https://www.grapecity.com/forums/wijmo/flexchart-line-symbol-hove.
  
  The solution from this method works (see https://stackblitz.com/edit/js-afacsz) but has a disadvantage: user has to hover precisely on a symbol (which is quite hard when a symbol is small).

  What I want to achieve is to highlight a symbol when hovering somewhere around that symbol. Right now if you look at the example there already appears a marker box with description of the nearest point.
  
  
  
  I would like to highlight that nearest point (i.e. make an ellipse bigger) without needing to precisely point mouse to the point.
  
  Is it possible to do?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 May 2020, 1:04 am EST

  Hi,

  In this case, the hover CSS selector will not work. You will manually need to check whether the cursor is near to the series symbol and add a CSS class to the series ellipse so that it displays the red ellipse.
  
  You will need to handle the mousemove event on the FlexChart and use the hitTest method to find the nearest series. Once the cursor is near a series point, find the element of the series and add the CSS class.

  Refer to the updated sample below:

  https://stackblitz.com/edit/js-lcawml

  Regards,
  
  Ashwin

• 

  metrik

  • Post Options:
  • Link
    Copy

  Posted 11 May 2020, 3:35 am EST

  Thanks! Will give it a try! By the way, is there a way to make the ellipse which appears on hover filled with with some color?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 May 2020, 12:50 am EST

  Hi,

  In this example, we have increased the stroke-width of the ellipse due to which we can see the red border. But, since the ellipse is very small, the fill property will not work and increasing the stroke-width will just increase the radius with more white space.
  
  I have found another solution to your requirement that uses annotation. You can handle the mousemove event on the chart and create an annotation on the series point whenever the mouse is near the point.

  Refer to the sample attached.

  ~regards

  chart.zip

• 

  metrik

  • Post Options:
  • Link
    Copy

  Posted 14 May 2020, 10:07 am EST

  Thank you Ashwin, it works!