Show or hide marker on zoom

Question

Is it possible to have the marker for a series only be visible when the chart is past a certain zoom level? When the chart is zoomed out the markers all bunch together, but they are useful to have when zoomed in.

I've tried editing the isVisible property using onZoomEnd, but I have to call notifyListeners for this to apply, which resets the chart. Is there a different method, designed to not require reseting the chart?

Thanks!

Yuvaraj Gajaraj · Accepted Answer

Hi Cory,Greetings from Syncfusion. You can achieve this with the
help of onZooming and onMarkerRender callback,
in the onZooming callback
you can get the zooming factor. So, you can store the zooming factor in the
local variable, and in the onMarkerRender event,
you can hide the marker by setting markerHeight and markerWidth in
the argument until it reaches to specific zoom factor. We have attached the
code snippet to achieve your requirement and you can change based on your
scenario.Code snippet:

//Local variable to
  store the zoom factor
  double zoomFactor = 1.0;
   
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SfCartesianChart(
       
    zoomPanBehavior:
       
        ZoomPanBehavior(enablePinching: true, enablePanning: true),
       
    onZooming: (args) {
       
      zoomFactor = args.currentZoomFactor;
       
    },
       
    onMarkerRender: (args) {
       
      if (zoomFactor
  > 0.9) {
       
        args.markerHeight = 0;
       
        args.markerWidth = 0;
       
      }
       
    },
          //Other required properties
        ),
      );
    }

If you have any queries, 
please get back to us.Regards,Yuvaraj.

Cory Davis · Answer

This is excellent! Thank you!If possible,I'd like to change the dateFormat of my DateTimeAxis as a user zooms as well. Does there happen to be a similar handler and property that would allow for this too?

Yuvaraj Gajaraj · Answer

Hi Cory,Yes, you can able to change the DateFormat
of DateTimeAxis
label with the help of axisLabelFormatter
callback. Here you can get the date time value of the visible points in
milliseconds based on this you can convert it to the required date time format
when a certain zoom factor reaches and return in the axisLabelFormatter
callback. We have attached the code snippet below to achieve your requirement.Code snippet:

double zoomFactor = 1.0;
   
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: SfCartesianChart(
       
    zoomPanBehavior:
       
        ZoomPanBehavior(enablePinching: true, enablePanning: true),
       
    onZooming: (args) {
       
      zoomFactor = args.currentZoomFactor;
       
    },
       
    primaryXAxis: DateTimeAxis(axisLabelFormatter: (args) {
       
      String axisLabel = args.text;
       
      if (zoomFactor
  < 0.9) {
       
        axisLabel = DateFormat.yMd().format(
       
            DateTime.fromMillisecondsSinceEpoch(args.value.toInt()));
       
      }
       
      return ChartAxisLabel(axisLabel, args.textStyle);
       
    }),
      ));
    }

If you have any queries, please get back to us.Regards,Yuvaraj.

Cory Davis · Answer

Perfect, thank you!

Yuvaraj Gajaraj · Answer

Hi Cory,Most welcome. If you have any further queries, please get
back to us. We are always happy to assist you.Regards,Yuvaraj.