We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Reduce number of Data Markers when zooming out

Hi,

I'm using SfChart element in iOS and Android with Zooming enabled and also I'm displaying Data Markers.

When zooming out, my graph is showing a big number of Data Markers, which results in that the numbers of Data Markers can't be read anymore (since there are too many).

Is there any setting, where the number of Data Markers can be "aligned" with the zoom level, e.g. reduce the numbers shown when having a high/low zoom level?

Thanks for your support,
Tac 

Attachment: Screen_Shot_20160902_at_09.22.54.png_e321a471.zip

3 Replies

KV Karthikeyan V Syncfusion Team September 6, 2016 12:30 PM UTC

Hi Tac,

Thanks for contacting Syncfusion support.

We have prepared a workaround sample based on your requirement and it can be downloaded from the below location. 

Thanks,
Karthikeyan V.

Attachment: Sample_ReduceDataMarker_f222ca89.zip


AM Amplicade October 5, 2016 06:57 PM UTC

Hi,

thank you. I'm not sure I know how to use your code in my solution. 

Let me provide you some details on my solution:
  • I'm using XamarinForms Shared Code to create the SfChart
  • SfChart is created in XAML view like this
<ContentView x:Name="ChartContentView" >
 <ContentView.Content>
  <chart:SfChart x:Name="chart" BackgroundColor="Transparent" />
 </ContentView.Content>
</ContentView>

  • In code behind, SfChart is getting all required details
DateTimeAxis primaryAxis = new DateTimeAxis()
{
EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift,
RangePadding = DateTimeRangePadding.None,
LabelsIntersectAction = AxisLabelsIntersectAction.Hide,
EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.Default,
};
primaryAxis.EnableAutoIntervalOnZooming = true;
chart.PrimaryAxis = primaryAxis;

NumericalAxis numericalAxis = new NumericalAxis()
{
Minimum = ViewModel.MinBmi,
Maximum = ViewModel.MaxBmi,
Interval = 5,
//RangePadding = NumericalPadding.Additional,
};
chart.SecondaryAxis = numericalAxis;

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();
zoomPanBehavior.EnablePanning = true;
zoomPanBehavior.EnableZooming = true;
zoomPanBehavior.EnableSelectionZooming = true;
zoomPanBehavior.EnableDoubleTap = true;
chart.ChartBehaviors.Add(zoomPanBehavior);

LineSeries lineDataBmi = new LineSeries()
{
ItemsSource = ViewModel.LineDataBmi,
XBindingPath = "Day",
YBindingPath = "Value",
StrokeWidth = 3,
Label = "Title",
};


Would it be possible to explain to me, how I can use your sample? I'm not using a nativeView and I don't know where to put the following method to?
public override NSString GetFormattedDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series)

Please let me know if you need more details from my side that I can provide you.

Thanks,
Tac


JC Jaikrishna Chandrasekar Syncfusion Team October 6, 2016 05:41 PM UTC

Hi Tac,
 
 In the AppDelegate class of the iOS Platform specific project file, you can include the below code in the FinishedLaunching method to get the native view
 
Xamarin.Forms.Forms.ViewInitialized += (object sender, Xamarin.Forms.ViewInitializedEventArgs e) =>
{
   if (e.NativeView is SFChart)
   {
      SFChart nativeChart = (e.NativeView as SFChart);
      SfChart formsChart = e.View as SfChart;
      nativeChart.Delegate = new CustomChartDelegate();
   }
};
 
Create the class for CustomChartDelegate and include the below code for the dataMarker customization and check the sample
 
public override NSString GetFormattedDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series)
{
  if (series is SFXyDataSeries)
   {
    if (!(chart.SecondaryAxis.ZoomFactor < 1) || !(chart.PrimaryAxis.ZoomFactor < 1))
     {
        if ((int)index % 4 == 0)
         {
              return label;
         }
         else
         {
              return new NSString("");
         }
      }
    }
      
return label;
 }
 
 
 
Note : If the provided solution does not meet your requirement, Please give more information which will be helpful for us to serve you better.
 
Regards,
Jaikrishna C


Loader.
Live Chat Icon For mobile
Up arrow icon