How to make part of the graphics gray (shaded) as in the picture?

[Maria]

I use SfChart.I use trackball and I want that, when I move the trackball then the right part of the screen after the line becomes shaded as in the picture, how to do it???

Attachment: Screenshot_1_155c496a.rar

[editionbel]

Change a picture to grayscale or to black-and-white. Click the picture that you want to change. On the Format tab, click Recolor, and then choose Grayscale   Audi Financial Services Payoff Address

[Maria]

I'm sorry, but I don't understand if you can please explain more clearly or show for example some code example please

[Yuvaraj Palanisamy]

Hi Maria, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and we have achieved your requirement “Make part of the graphics gray with trackball movement” with the help of RectangleAnnotation and Trackball created event in SfChart. Please find the code example below. 

 

CodeSnippet: 

MainPage.xaml 

<chart:SfChart TrackballCreated="SfChart_TrackballCreated" > 

 

. . . 

 

<chart:SfChart.ChartAnnotations> 

    <chart:RectangleAnnotation Y1="0" IsVisible="False" 

                               FillColor="#80d3d3d3" 

                               StrokeWidth="0" 

                               x:Name="rectangleAnnotation"  

                               CoordinateUnit="Pixels" /> 

</chart:SfChart.ChartAnnotations> 

 

<chart:SfChart.ChartBehaviors> 

    <local:ChartTrackballExt x:Name="trackballBehavior" ShowLabel="False"> 

        <local:ChartTrackballExt.MarkerStyle> 

            <chart:ChartTrackballMarkerStyle ShowMarker="False"/> 

        </local:ChartTrackballExt.MarkerStyle> 

        <local:ChartTrackballExt.LineStyle> 

            <chart:ChartLineStyle StrokeColor="Black" StrokeWidth="2"/> 

        </local:ChartTrackballExt.LineStyle> 

    </local:ChartTrackballExt> 

</chart:SfChart.ChartBehaviors> 

 

</chart:SfChart> 

 

MainPage.xaml.cs 

private void SfChart_TrackballCreated(object sender, ChartTrackballCreatedEventArgs e) 

{ 

    rectangleAnnotation.X1 = (e.ChartPointsInfo[0] as ChartPointInfo).XPosition;        

    if (!rectangleAnnotation.IsVisible) 

    { 

        rectangleAnnotation.IsVisible = true; 

        var seriesBounds = (sender as SfChart).SeriesBounds; 

        rectangleAnnotation.Y1 = seriesBounds.Top; 

        rectangleAnnotation.Y2 = seriesBounds.Bottom; 

        rectangleAnnotation.X2 = seriesBounds.Right; 

    } 

} 

 

public class ChartTrackballExt : ChartTrackballBehavior 

{ 

    protected override void OnTouchUp(float pointX, float pointY) 

    { 

        base.OnTouchUp(pointX, pointY); 

        if (this.Chart.ChartAnnotations.Count > 0) 

            (this.Chart.ChartAnnotations[0] as RectangleAnnotation).IsVisible = false; 

    } 

} 

 

Also, we have attached the complete sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/166996/ze/ChartSample_Trackball363469327  

  

Output: 

 

 

For more details, please refer the below link 

https://help.syncfusion.com/xamarin/charts/trackball  

https://help.syncfusion.com/xamarin/charts/chartannotation#shape-annotation  

 

Please let us know if you have any concern. 

 

Regards, 

Yuvaraj.

[Maria]

Dear  Yuvaraj Palanisamy,it works.

But the style of the line has not changed. It has not become a dash

[Yuvaraj Palanisamy]

Hi Maria, 

 

You can customize the trackball line with help of LabelStyle property of ChartTrackballBehavior. You can show solid line by removing the StrokeDashArray property as mentioned in the below code example.  

 

CodeSnippet: 

MainPage.xaml.cs 

trackballBehavior.LineStyle.StrokeDashArray = new double[2] { 2, 3 }; 

 

For more details, please refer the below link. 

https://help.syncfusion.com/xamarin/charts/trackball#customizing-appearance  

 

Regards, 

Yuvaraj.