[Flutter Web] The icon of cursor is not changing to hand when I hover over the Stacked Bar.

Question

[Flutter Web] I am using the SFCartesianChart with StackBarSeries. I would like to show that the bars are clickable by showing hand cursor whenever use hover over the bar in the chart.

Aswini Suresh Reddy · Answer

Hi Aman Masipeddi,We have reviewed your query regarding The icon of
cursor is not changing to hand when I hover over the series and as you have
already mentioned, we have already logged it as feature request in the feedback
portal. FR:Support
for customizing the mouse cursor for interactive featuresHowever, at this time, we do not have a specific timeline
for when support for customizing the mouse cursor for interactive features will
be implemented as our development priorities are determined by customer demand.
During the planning stage for each release cycle, we review all open features
and identify which ones to implement based on specific parameters including
product vision, technological feasibility, and customer interest. We will
inform you once this feature is implemented. We appreciate your patience in the
meantime.   If you have any additional specifications or suggestions
for this feature request, feel free to leave them in the comments section of
the feedback link. This will help us understand how you would like to use it
and how we can improve it.Regards,Aswini S

Dkeoc Skao · Answer

I noticed the same issue with the cursor not changing to a hand when hovering over the Stacked Bar. It seems like a small bug, but I’m sure it will be fixed soon. If you’re curious about the costs involved in Flutter development, you can check out this helpful article on flutter pricing. Hopefully, this issue can be resolved quickly!

Preethika Selvam · Answer

Hi All,Currently,
the SfCartesianChart
does not support customizing the mouse cursor for interaction points within the
chart. In our SfCartesianChart,
we use a 'click' cursor for interaction behaviors and a 'hand' cursor for
legend toggling. While wrapping the chart in a MouseRegion
allows you to change the cursor for the overall chart area, it does not
specifically apply to the chart's interactive elements. However,
we will be adding support for a single mouse cursor customization that will
apply to the entire chart, including interaction points. This enhancement is
scheduled for our upcoming weekly patch release on February 18, 2025. We will
update you here once the release is rolled out, and we appreciate your patience
until then.Regards,
Preethika Selvam.

Preethika Selvam · Answer

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.

Omar Cooley · Answer

@

ragdoll hit

Hey, I totally get wanting to make the bars in your `SFCartesianChart` with `StackedBarSeries` look clickable on Flutter web! To show a hand cursor when users hover over the bars, wrap your chart in a `MouseRegion` widget and set its `cursor` to `SystemMouseCursors.click`. Then, use the `onPointHover` callback in `SfCartesianChart` to detect when a bar is hovered over, updating a state variable to toggle the cursor. This way, the hand cursor appears only when hovering over a bar, giving that clickable vibe! I can share a code snippet if you’d like—have you tried anything like this yet? 😊

Baranibharathi Pandian · Answer

Hi Omar Cooley,Thank you for your
suggestion. The approach you mentioned using the MouseRegion with
SystemMouseCursors.click can work with the public callback for tap events in
the  SfCartesianChart.
However, we currently do not have a public callback for onPointHover, which
makes it difficult to implement the hover-based cursor change you described.Please feel free to
reach out if you have any further queries. We are always happy to assist you.Regards,Baranibharathi P.

Harold Coleman · Answer

@google baseball To change the cursor to a hand when hovering over the stacked bars in your SFCartesianChart, you can use the mouseCursor property. Set it to SystemMouseCursors.click within your StackBarSeries definition. This should indicate that the bars are clickable.

Mugunthan Ramalingam · Answer

Hi Harold Coleman,As mentioned earlier, since there is no public onPointHover callback available, it's currently not possible to change the cursor when hovering over the StackedBarSeries.Regards,Mugunthan.