How to make in a chart a horizontal scroll when there are many columns and mantain static the Y-Axe (UWP)

[Daniel]

Hi everybody,

I searched unsuccessfully an example where in a column chart include a horizontal scroll when there are many columns and mantain static the Y-Axe when scrolling in UWP. Is there any way to do it?

Thanks.

Regards.

[Rachel A]

Hi Daniel, 

Thanks for contacting Syncfusion support. 

1. To horizontally scroll in the SfChart you can enable the scroll bar using the below code snippet. 

XAML 

 

          <chart:SfChart.PrimaryAxis> 

                <chart:CategoryAxis EnableScrollBar="True"></chart:CategoryAxis> 

            </chart:SfChart.PrimaryAxis> 

 

 

Refer the below UG documentation link to know more information about scrollbar. 

http://help.syncfusion.com/uwp/sfchart/interactive-features#resizable-scroll-bar 

2.We can also zoom along x axis keeping the y axis as static using the below code snippet. 

XAML 

           <chart:SfChart.Behaviors> 

                <chart:ChartZoomPanBehavior ZoomMode="X"></chart:ChartZoomPanBehavior> 

            </chart:SfChart.Behaviors> 

 

Please refer the below UG documentation like to know about zooming. 

http://help.syncfusion.com/uwp/sfchart/interactive-features#zooming-and-panning 

Regards, 

Rachel. A 

 

[Daniel]

Thanks Raquel... 

Works with the code that you passed me but what I wanted more-less, for example, this graph with many columns:

Make only visible 5 or 6 columns of data with their label below when loaded the graph... something like this:

Thanks again,

Regards.

[Rachel A]

Hi Daniel, 

Thanks for the update. 

We can achieve this requirement by  setting the VisibleMinimum and VisibleMaximum values in the ActualRangeChanged event arguments as in the below code snippet. 

XAML 

  <chart:SfChart.PrimaryAxis> 

                <chart:CategoryAxis EnableScrollBar="True" ActualRangeChanged="CategoryAxis_ActualRangeChanged"  ></chart:CategoryAxis> 

            </chart:SfChart.PrimaryAxis> 

C# 

private void CategoryAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 

        { 

            e.VisibleMinimum = Convert.ToDouble(e.ActualMinimum) + 6; 

            e.VisibleMaximum = Convert.ToDouble(e.ActualMaximum) - 6; 

        } 

Also, we have prepared the sample for your reference and you can download the sample from the following location. 

scroll_bar 

Regards, 

Rachel. A 

[Daniel]

Hi Rachel...

Thanks for the update, I testing the example that you attached and it is almost what I need but the only problem is that i can move the scroll to view the others column (always stay in the same place if I try to move the horizontal scroll)

Regards,

Daniel

[Rachel A]

Hi Daniel, 

 

Thanks for the update. 

 

We can check whether the scrollbar is dragged using IsScrolling value in ActualRangeChanged event arguments. 

 

Please find the below sample for your reference and you can download the sample from the following location. 

 

scrollbar_view 

 

Regards, 

Rachel. A 

 

[Daniel]

Thanks Rachel... works very well, that was the trick. I made some adjustments with the last attached solution and it worked with my application.

The last thing that I couldn't do, in my app and also in the last attached solution, is enable the scroll in the Mobile emulator. I put the property "EnableTouchMode" but not responding the chart to move. How I can make this work?

Thanks again.

Regards,

Daniel.

[Rachel A]

Hi Daniel, 

 

Thanks for the update. 

 

As the mobile view is small the scrollbar is not applicable, so we have no scrollbar support in mobile platforms. We can achieve your requirement by adding zoom pan behavior in SfChart for mobile view. We have prepared the sample for your reference and you can download the sample from the following location. 

 

scrollview 

 

Refer the below UG link to know about zooming behavior. 

 

http://help.syncfusion.com/uwp/sfchart/interactive-features#zooming-and-panning 

 

Regards, 

Rachel. A 

[Daniel]

Works perfectly in mobile and desktop.

Thanks for all Raquel.

Regars, Daniel

[Rachel A]

Hi Daniel, 

Thanks for the update. 

Please let us know if you need any further assistance . 

  

Regards, 

Rachel. A