Custom mouse cursor
Hi. I need to customize the mouse cursor in my flutter web application that uses SF charts. When I try to use mouse region over the SfCartesianChart widget it has no effect.
Have you tried wrapping your SfCartesianChart widget with a MouseRegion widget and setting the cursor property inside it? It should work to customize the mouse cursor. Let me know if you need more help with the implementation!
Best,
Hi. Checked and looks like its working, but something in my code not dependent to charts blocks the cursor from changing. Also can you please advice how can I change Selection zoom gesture. In all web libraries zoom selection is made just by single tap and drag, not long press. Is there any way to change it ?
Hi Glib,
Query 1: Checked and looks like it’s working, but something in my code not dependent to charts blocks the cursor from changing.
Currently we are validating your query at our end, and we will update further details in two business days within June 10, 2024. We appreciate your patience until then.
Query 2: In all web libraries zoom selection is made just by single tap and drag, not long press. Is there any way to change it?
We would like to let you know, by specifying enableSelectionZooming property to true, you can long press and drag to select a range on the chart to be zoomed in. We have shared a UG documentation and live sample below for your reference.
UG Link: https://help.syncfusion.com/flutter/cartesian-charts/zoom-pan#selection-zooming
Live Sample Link: https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/zooming-and-panning/selection-zooming
Please let us know if you need any further assistance.
Regards,
Preethika Selvam.
I know how to enable selection zooming, but my question about selection zooming gesture. I want to change the long press gesture that starts selection zooming to a drag gesture, how can I do it?
Hi Glib,
Query 1: Checked and looks like it’s working, but something in my code not dependent to charts blocks the cursor from changing.
We have analyzed your query and would like to inform that you can customize the MouseRegion cursor by wrapping the SfCartesianChart inside the MouseRegion except the SfCartesianChart interaction points. In our SfCartesianChart, we use a 'click' cursor for interaction behaviors and a 'hand' cursor for legend toggling. Currently we don’t have a support to customize the mouse cursor for interactive features. However, we have considered your requirement as a new feature and logged feature request for it in our feedback portal.
Query 2: In all web libraries zoom selection is made just by single tap and drag, not long press. Is there any way to change it?
We would like to let you know that currently we don’t have support for selection zooming with single tap. However, we have already considered your requirement as a new feature and logged feature request for it in our feedback portal.
We will prioritize the feature of every release based on demand and priority. So, these two features will be available in any of our upcoming releases. You can also track the status of these two features with the feedback link above.
Regards,
Preethika Selvam.
To customize the mouse cursor in your Flutter web app with SfCartesianChart, wrap the chart in a MouseRegion widget and set the desired cursor
Hi Glib Garkovenko,
We have reproduced the issue on our end and would like to inform you that it has already been fixed. The fix is scheduled to roll out in our upcoming weekly patch release on February 18, 2025. We will notify you here once the release has been rolled out, and we appreciate your patience in the meantime.
Regards,
Aswini S
Hi All,
The reported issue is fixed, and the fix published in the below version. Therefore, we kindly request that you upgrade the syncfusion_flutter_charts package to the latest version below to avoid this issue.
Version:
https://pub.dev/packages/syncfusion_flutter_charts/versions/28.2.6
Root Cause: By default, the basic cursor type was used for the entire chart area, preventing the custom cursor from working as expected.
Note:
Legend: A hand cursor is provided for legend items by default; this is the current behavior.
Chart Area: Cursor customization is available only for the entire chart area, not for specific chart features such as series and legend.
Regards,
Preethika Selvam.
o customize the mouse cursor in Flutter's SF charts, wrap the chart in a MouseRegion and specify the cursor type tag game
Hi
Pandora,
Thanks for the suggestion. Kindly get back to us if you have further queries. We are always happy to assist you.
Regards,
Mugunthan.
Wrap your SfCartesianChart in a MouseRegion and set the cursor property to customize the mouse cursor. snow rider
To customize the mouse cursor in your Flutter web application with SF charts, ensure you're wrapping the SfCartesianChart widget in a MouseRegion. This should allow you to set the desired cursor effectively.
@
To customize the mouse cursor in your Flutter web application using SF Charts, you can wrap the SfCartesianChart widget with a MouseRegion widget and set the cursor property to the desired cursor type, ensuring that the MouseRegion is correctly configured to capture mouse events.
Hi All,
The reported issue is fixed, and the fix published in the below version. Therefore, we kindly request that you upgrade the syncfusion_flutter_charts package to the latest version below to avoid this issue.
Version: https://pub.dev/packages/syncfusion_flutter_charts/versions/28.2.6
Root Cause: By default, the bloodmoney cursor type was used for the entire chart area, preventing the custom cursor from working as expected.
Note:
Legend: A hand cursor is provided for legend items by default; this is the current behavior.
Chart Area: Cursor customization is available only for the entire chart area, not for specific chart features such as series and legend.
Regards,
Preethika Selvam.
very intrestin discussion thanks
very intrestin discussion thanks
- 16 Replies
- 12 Participants
-
GG Glib Garkovenko
- Jun 5, 2024 07:24 AM UTC
- Dec 7, 2025 01:36 PM UTC
