Change the Axis Text Style dynamically

[Luís]

Hi!

Its possible to change the text style of the X Axis when the column is selected, as in the picture?

Whenever a new column is selected in the selectBehavior, the text is white, and the rest of the deselected columns remain gray.

Thanks a lot!

[Sriram Kiran Senthilkumar]

Hi Luis, 

  

Greetings from Syncfusion. We have analyzed your scenario and you can achieve the requested scenario with the help of the onSelectionChanged and onAxisLabelRender callback events available in the chart. We have created a simple column chart sample in which we have enabled the selection behavior for the series and by using the onSeletectionChanged event, we have stored the selected data point’s index in a separate variable and using that variable to check whether its values is equal to the respective axis label index value in the onAxisLabelRender event. Please check the code snippet below for further reference. 

@override 

  Widget build(BuildContext context) { 

    return Scaffold( 

        appBar: AppBar( 

          title: const Text('Syncfusion Flutter chart'), 

        ), 

        body: SfCartesianChart( 

            // For storing the selected data point’s index 

            onSelectionChanged: (args) { 

              if (selectedPointIndex == args.overallDataPointIndex) { 

                selectedPointIndex = -1; 

              } else { 

                selectedPointIndex = args.overallDataPointIndex; 

              } 

              setState(() {}); 

            }, 

            // Checked for the selected data point’s index and changing the color of the respective 

            // axis label 

            onAxisLabelRender: (args) { 

              TextStyle axisLabelStyle = args.textStyle; 

              if (args.axisName == 'primaryXAxis') { 

                if (args.value == selectedPointIndex) { 

                  args.textStyle = axisLabelStyle.copyWith(color: Colors.white); 

                } else { 

                  args.textStyle = axisLabelStyle.copyWith(color: Colors.grey); 

                } 

              } 

            }, 

            primaryXAxis: CategoryAxis( 

                name: 'primaryXAxis', 

                // Set the default color for the axis labels 

                labelStyle: TextStyle(color: Colors.grey)), 

            series: <ChartSeries<_SalesData, String>>[ 

              ColumnSeries<_SalesData, String>( 

                  dataSource: chartData, 

                  xValueMapper: (_SalesData sales, _) => sales.year, 

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

                  // Enabling selection for the series 

                  selectionBehavior: SelectionBehavior( 

                      enable: true, 

                      selectedBorderColor: Colors.red, 

                      selectedBorderWidth: 2)) 

            ])); 

  } 

} 

The sample for reference can be found below. 

https://www.syncfusion.com/downloads/support/forum/158974/ze/f158974_sample1016600620 

  

For further reference on the onSelectionChanged and onAxisLabelRender callback events, please refer the user guide below. 

onSelectionChanged - https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onselectionchanged 

onAxisLabelRender - https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onaxislabelrender 

Please check the above-attached sample and revert us if you still have further concerns. 

Regards, 

Sriram Kiran 

[Luís]

Thanks a lot! It worked for me.

But with this implementation, there was a problem. The problem is in the initialSelectedDataIndexes.

When I have defined the desired array in the initialSelectedDataIndexes, whenever I select a new column, the initial value (in this case the last column) remains selected, as shown in the image.

I don't know if this is a bug, or it is a bad implementation on my part. But I needed help.

I would like to know too how the white label appears in the column defined in the initialSelectedDataIndexes, when the widget is started.

Thanks Sriram for all!!!

[Sriram Kiran Senthilkumar]

Hi Luis, 

  

We have analyzed your query with the provided information and we are able to replicate the reported issue at our end  regarding the initially selected data point not getting deselected when another data point is selected using user interaction. We will consider this as a bug and will include the fix for the reported issue in our upcoming weekly patch release which is expected to be rolled out by 3^rd November 2020. We will update you once the release is rolled out and we appreciate your patience until then. 

  

Regards, 

Sriram Kiran 

[Luís]

Thank you very much!

[Luís]

Another thing about the initial value. When the graph starts and I have unselectedOpacity = 1, and selectedOpacity = 0.3, everything is fine and the selected column appears with an opacity of 0.3.

On the other hand, when the graph starts and I have unselectedOpacity = 0.3, and selectedOpacity = 1, the columns all appear with an opacity of 1. And to be correct, when starting the graph all columns with an opacity of 0.3 should appear, and the selected one with an opacity of 1.

I don't know if this is a bug.

Thank you so much for everything!

[Sriram Kiran Senthilkumar]

Hi Luis, 

  

We have analyzed your query and we are able to replicate the reported issue at our end regarding the unselected opacity not considered for the unselected data points in the chart on initial rendering when the initialSelectedDataIndexes array is defined. We will consider this as a bug and will include the fix for reported issue in the same weekly patch release which is expected to be rolled out by 3^rd November 2020. We will update you here once the release is rolled out and we appreciate your patience until then. 

  

Regards, 

Sriram Kiran 

[Sriram Kiran Senthilkumar]

Hi Luis, 

  

Sorry for the inconvenience. As the weekly patch release is rescheduled to roll out by the middle of next week, we will include the fix for the reported issues in that patch release. We will update you once the release is rolled out and we appreciate your patience until then. 

  

Regards, 

Sriram Kiran 

[Dharanidharan Dharmasivam]

Hi Luis, 

 

We are glad to announce that the issue unselected opacity not applied properly has been fixed and rolled in the pub with v18.3.48+1. So, we request to update your chart package to this v18.3.48+1 to resolve the reported issue.  

Pub Link - https://pub.dev/packages/syncfusion_flutter_charts/versions/18.3.48 

  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Thanks, 

Dharani. 

 

[Luís]

Thank you very much, it's working!!

[Dharanidharan Dharmasivam]

Hi Luis, 

  

Most welcome. Kindly revert us, if you have any queries. We are always happy in assisting you. 

  

Thanks, 

Dharani.