How to Change Cursor to Pointer on Series Marker in JavaScript Charts?

You can change the cursor to a pointer when hovering over a series marker using the chartMouseMove event. The cursor will switch to a pointer only when the mouse is over marker elements and revert to default otherwise.

Implementation Steps

• Handle the chartMouseMove event.
• Read the hovered element id from args.target.
• If the id indicates a series marker (Point/Symbol), set the chart container’s cursor to pointer.
• Otherwise, reset the cursor to default.

// Inside your chart configuration
   chartMouseMove: (args) => {
     const container = document.getElementById(chart?.element.id);
     if (!container) return;

     const t = args.target || '';
     // Match only marker symbol elements: <chartId>_Series_{i}_Point_{j}_Trackball
     const isSeriesMarker =
       t.includes('_Series_') &&
       t.includes('_Point_') &&
       t.includes('_Trackball_');
     container.style.cursor = isSeriesMarker ? 'pointer' : 'default';
   },

Output

The cursor changes to a pointer only when hovering over the series markers and reverts to default elsewhere.

Live Sample

StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to change cursor to pointer on series marker in JavaScript Charts.

You can refer to our JavaScript Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our JavaScript Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our JavaScript components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our JavaScript Chart and other JavaScript components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!