column series hover color

[Jesse]

Hello, is there a onhover callback that I can use to change the color of the series column point when the user hovers over it? I'm trying to change the color of the bar point when the user hovers over it. 

[Hariharasudhan Kanagaraj]

Hi Jesse,

We would like to inform you that, currently in SfCartesianChart, there is no direct support or callback to detect the hovering of segments. However, You can achieve the mentioned requirement by using the onTooltipRender callback and pointColorMapper property in the respective series. We have prepared a sample with Bar Series and when we hover over the Bar Segment, the current point index is obtained using the onTooltipRender callback. To update the color of the segment, we have called the setState method within the addPostFrameCallback method and when the widget rebuilds, the color of the hovered segment will be changed using the pointColorMapper, as shown in the code snippet below.

class _MainAppState extends State<MainApp> {

  late List<SalesData> salesData;

  late TooltipBehavior _tooltipBehavior;

  int? pointIndex;

  List<Color> colors = [

    Colors.blue,

    Colors.red,

  ];

 

  @override

  void initState() {

    salesData = [

      SalesData(10, 70),

      SalesData(20, 60),

      SalesData(30, 20),

      SalesData(40, 50),

      SalesData(50, 30),

    ];

    _tooltipBehavior = TooltipBehavior(

      enable: true,

    );

    super.initState();

  }

 

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: Scaffold(

        body: SfCartesianChart(

          onTooltipRender: (TooltipArgs tooltipArgs) {

            SchedulerBinding.instance

                .addPostFrameCallback((Duration timeStamp) {

              setState(() {

                pointIndex = tooltipArgs.pointIndex!.toInt();

              });

            });

          },

          primaryXAxis: NumericAxis(),

          primaryYAxis: NumericAxis(),

          series: <ChartSeries>[

            BarSeries<SalesData, num>(

              dataSource: salesData,

              xValueMapper: (SalesData sales, _) => sales.period,

              yValueMapper: (SalesData sales, _) => sales.sales,

              pointColorMapper: (SalesData sales, int index) =>

                  pointIndex != null && pointIndex == index

                      ? colors[1]

                      : colors[0],

            ),

          ],

          tooltipBehavior: _tooltipBehavior,

        ),

      ),

    );

  }

}

 

Snapshot:

Attached the sample below for your reference and you can modify the sample according to your needs. If you have further queries, please get back to us.

Regards,

Hari Hara Sudhan. K.

Attachment: _184155_b4a625e8.zip