Custom tooltip

[Bar Ilan]

Is it possible to create custom tooltip like this:

The second thing I want is for the tooltip to open only when double tapped and close only when double tapped again.

[Yuvaraj Gajaraj]

Hi Zhu,

Your requirement can be achieved by using the onPointDoubleTap callback in the series. This callback allows you to obtain the index of the tapped data point when performing a double tap. You can then use this index to show the trackball by calling the public method showByIndex and passing the pointIndex value to it. We have provided a code snippet and sample for your reference, you can modify the sample as per your requirement.

Code snippet:

onPointDoubleTap: (details) {

if (details.pointIndex! == pointIndex) {

pointIndex = null;

setState(() {});

} else {

pointIndex = details.pointIndex;

_trackballBehavior!.showByIndex(details.pointIndex!);

}

},

Screenshot:

Regards,

Yuvaraj.

Attachment: f180113_13f5e68a.zip

[Bar Ilan]

Awesome thank you.

Double tapping on specific indexes displays the trackball for a few seconds, then disappears.

Is there a way to resolve it?

[Yuvaraj Gajaraj]

Hi Bar,

Your requirement can be achieved with the help of the hideDelay property in the TrackballBehavior. In this case, remove the shouldAlwaysShow property in the trackball, and it will cause the trackball to disappear with a specified time duration after it activates. We have shared the sample and code snippet below for your requirement.

Code snippet:

onPointDoubleTap: (details) {

_trackballBehavior!.showByIndex(details.pointIndex!);

},

_trackballBehavior = TrackballBehavior(

enable: true,

// Duration in milliseconds

hideDelay: 5000,

lineColor: Colors.transparent,

activationMode: ActivationMode.none,

builder: (context, trackballDetails) {

// Other required properties

});

Regards,

Yuvaraj.

Attachment: f180113_8e55ba97.zip

[Bar Ilan]

This is not what i mean.

My problem is that the tooltip is disappears.

Behavior should be as follows:

When the user double clicks, he will be able to see the tooltip, but if he double taps again, the tooltip will disappear.

[Yuvaraj Gajaraj]

Hi Bar,

We have checked your query and the trackball is not disappeared after some time. We suspect that the issue may be caused by calling the setState method in your sample code to update the chart data. To resolve this issue, we recommend using the updateDataSource method in the chart when dynamically updating the chart data. This will help to update the chart data without rebuilding the entire chart. Additionally, we suggest calling the trackball's showByIndex method after the updateDataSource method, using the existing pointIndex value stored in the public field in the sample. This will ensure that the trackball remains at the same point index until double-tapped to hide. We have modified the sample and shared it below for your reference.

UG, https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource

Regards,

Yuvaraj.

Attachment: f180113_a659bfba.zip

[Bar Ilan]

Hi,

i'm using flutter_redux maybe because of that.

How i can fix it?

[Yuvaraj Gajaraj]

Hi Bar,

We are validating your query at our end and we will update further details in one business day on 30 January 2023. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi Bar,

We are still validating your query at our end and we need one more business day. We will update further details on 31 January 2023. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi Bar,

We have created the sample with the redux state management to update the chart data source. The widget returned in the StoreConnector, will be rebuilt every time while the AppState is called. So, if you place the chart widget inside its build method, it will be rebuilt.

We have created a sample using redux state management to update the chart data source. The widget returned by the StoreConnector will be rebuilt every time the AppState is updated. Thus, if you place the chart widget inside the build method, it will be reconstructed and the trackball will disappear while the chart is updating.

To prevent this, you can set the rebuildOnChange property in the StoreConnector to false and this will prevent the chart widget from being rebuilt. You can then update the chart data using the updateDataSource method and display the trackball with the existing point index. We have shared the sample below for your reference.

Code snippet:

StoreConnector<AppState, ViewModel>(

rebuildOnChange: false,

converter: (Store<AppState> store) => ViewModel.create(store),

builder: (BuildContext context, ViewModel viewModel) {

Timer.periodic(const Duration(seconds: 1), (timer) {

viewModel.onUpdate();

data.add(viewModel.data.last);

seriesController

.updateDataSource(addedDataIndexes: [data.length - 1]);

if (pointIndex != null) {

_trackballBehavior!.showByIndex(pointIndex!);

}

});

return SfCartesianChart(

// Other required properties

);

},

)

Regards,

Yuvaraj.

Attachment: f180113_18edcfea.zip

[Bar Ilan]

Thank you.

how can i display live data in annotations

[Natrayan Ramalingam]

Hi Bar,

You have to achieve your requirement by using the valueNotifier. We have prepared a sample by updating the text every second. You can modify the sample as per your requirements.

Regards,

Natrayan

Attachment: f180113_fb708d0.zip

[Bar Ilan]

Thank you!

Also is there way to convert DateTime of x timeline to point index? 

My goal is to display annotation only on Y 

[Yuvaraj Gajaraj]

Hi Bar,

You can obtain the index of your value from the data source list, which you have used for series, using the built-in indexWhere() method. It will return -1 if the value is not present in the list; otherwise, it will return the index value of the given value.

Code snippet:

int index = dataSource.indexWhere((data) => data.x == value);

Regards,

Yuvaraj.

[Bar Ilan]

Hi,

I'm trying to put annotations on const position (only x) my y is DateTime and X is double, as shown in the picture:

I using 

LineSeries<GetSymbolChartRespItemDto, DateTime> lineChart()

Is it possible to achieve this?

[Lokesh Palani]

Hi Bar,

The requirement to show the annotation shared in the attached image can be achieved with the help of CrosshairBehavior. In CrosshairBehavior set the activation mode to none and lineType as CrosshairLineType.none then disable the InteractiveTooltip in X-axis. Then show the crosshair by calling the show public method in the StoreConnector builder method after the updateDataSource method called. We have shared the code snippet and sample below for your requirement.

Code Snippet:

@override

  void initState() {

    _crosshairBehavior = CrosshairBehavior(

      enable: true,

      activationMode: ActivationMode.none,

      shouldAlwaysShow: true,

      lineType: CrosshairLineType.none,

    );

    super.initState();

  }

 

// Other required properties

 

 builder: (BuildContext context, ViewModel viewModel) {

          Timer.periodic(const Duration(seconds: 1), (Timer timer) {
       _crosshairBehavior.show(0, 100);

 

 }

}

 

// Other required properties

 

primaryXAxis: DateTimeAxis(

    interactiveTooltip: const InteractiveTooltip(enable: false),

)

 

Output :

Regards,

Lokesh Palani.

Attachment: f180113_eac5608f.zip

[Bar Ilan]

The crosshairBehavior has already been used.

Is it possible to have two crosshair behaviors on one chart?

Is it possible to achieve this with CartesianChartAnnotation?

thanks.

[Natrayan Ramalingam]

Hi Bar,

Query 1: "Is it possible to have two crosshairs on one chart?"

No, our charts only support one crosshair.

Query 2: "Is it possible to have crosshairs outside the plot area using CartesianChartAnnotation?"

No, annotations can only be positioned inside the plot area, not outside.

However, Your requirement can be achieved with the help of the axisLabelFormatter callback which is available in the axis and also you can customize the text from the callback argument by using the textStyle and return it as ChartAxisLabel. Please refer to the following code snippet.

primaryYAxis: NumericAxis(

   axisLabelFormatter: (args) {

       return ChartAxisLabel(

              args.text,

              args.text == "79.72" || args.text == "79.74"

                  ? const TextStyle(

                      backgroundColor: Colors.black,

                      color: Colors.white,

                    )

                  : args.textStyle,

      );

   },

)

Screenshot:

For more details, refer to the UG:

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

Regards,

Natrayan

[Bar Ilan]

Is there another way to display the tooltip without using rebuildOnChange: false

[Yuvaraj Gajaraj]

Hi Bar,

We would like to inform you that if you did not set false to the rebuildOnChange property, the chart widget inside the build method will be rebuilt and reconstructed while the chart is updating, which will cause the trackball to disappear. Therefore, there is no other way to show a trackball tooltip while updating the data point using Redux state management.

Regards,

Yuvaraj.