1. Home
  2. Forum
  3. Xamarin.Android
  4. Display specific SplineAreaSeries value.

Display specific SplineAreaSeries value.

Hello. In my xamarin android app I am trying to do something like this using SplineAreaSeries.  

https://sihealthcouk-my.sharepoint.com/personal/konstantinos_evangelidis_sihealth_co_uk/_layouts/15/onedrive.aspx?id=%2Fpersonal%2Fkonstantinos%5Fevangelidis%5Fsihealth%5Fco%5Fuk%2FDocuments%2FUntitled%2Epng&parent=%2Fpersonal%2Fkonstantinos%5Fevangelidis%5Fsihealth%5Fco%5Fuk%2FDocuments&slrid=aba25e9e%2D6000%2D5000%2D820b%2Dac955b441eaa

I tried to use something like this but the value is on bottom

VerticalLineAnnotation vertical = new VerticalLineAnnotation()
{
      X1 = 6,
      ShowAxisLabel = true,               
};

So I need to put this label on the top and change the color and width, height.

Thank you very much

8 Replies
KE Konstantinos Evangelidis April 18, 2018 11:22 AM UTC

Also is it possible to make it bouble like this image? 
https://sihealthcouk-my.sharepoint.com/:i:/g/personal/konstantinos_evangelidis_sihealth_co_uk/Eduho-VnFfdBoL5BPRJ7ITIBy02kBUY_6jdGgkoR7zkX7A?e=n1TxLz

DV Divya Venkatesan Syncfusion Team April 20, 2018 10:12 AM UTC

Hi Konstantinos, 
 
We are unable to access the links provided in your update. Could please share the images in an accessible way which would be helpful for us to guide you? 
 
Regards, 
Divya Venkatesan 
 


KE Konstantinos Evangelidis April 20, 2018 10:29 AM UTC

Hello. I just insert the links of the Images.
This is the first link.  And this is the second. 

Thank you very much for your time.

PS Parthiban Sundaram Syncfusion Team April 23, 2018 06:37 AM UTC

Hi Konstantinos, 
 
Thanks for the update. 
 
We are sorry to inform you that, still we are unable to access the provided link at our end. Please refer the following image.  
  
 
However, based on your previous provided details, we suspect that your requirement is to show text on top of VerticalLineAnnotation, we can achieve this with the help of built in Text property in VerticalLineAnnotation and we can customize the label using LabelStyle as follows.  
 
Code snippet : 
 
  VerticalLineAnnotation vertical = new VerticalLineAnnotation() 
  { 
     X1 = 6, 
     ShowAxisLabel = true, 
     Text = "Custom Label", 
  }; 
 
  vertical.LabelStyle.BackgroundColor = Color.Cyan; 
  vertical.LabelStyle.TextColor = Color.Red; 
  vertical.LabelStyle.TextSize = 12; 
 
 
Please refer the following link for more details. 
 
 
 
If the requirement is different from this, we request you update the more details or reattach the image properly which will be helpful for providing further assistance on this. 
 
Regards,
Parthiban S 


KE Konstantinos Evangelidis April 23, 2018 08:29 AM UTC

Hello and sorry again for this. I attached a zip file with the image inside I want to know if something like this is physible. 

Attachment: Untitled1_c34f1209.zip

DV Divya Venkatesan Syncfusion Team April 24, 2018 07:24 AM UTC

Hi Konstantinos, 
 
Thanks for contacting Syncfusion support. 
 
We have achieved your requirement using Annotations and applying gradient colors for series as shown in the below code snippets. 
 
Code snippet[C#]: 
            ChartGradientColor gradientColor = new ChartGradientColor() 
            { 
                StartPoint = new PointF(0,0.5f), 
                EndPoint = new PointF(1,0.5f) 
            }; 
            ChartGradientStop stop1 = new ChartGradientStop() { Color = Color.WhiteSmoke, Offset = 0 }; 
            ChartGradientStop stop2 = new ChartGradientStop() { Color = Color.WhiteSmoke, Offset = 0.1f }; 
            ChartGradientStop stop3 = new ChartGradientStop() { Color = Color.Argb(80,133, 147, 48), Offset = 0.1f }; 
            ChartGradientStop stop4 = new ChartGradientStop() { Color = Color.Rgb(133, 147, 48), Offset = 0.5f }; 
            ChartGradientStop stop5 = new ChartGradientStop() { Color = Color.WhiteSmoke, Offset = 0.5f }; 
            ChartGradientStop stop6 = new ChartGradientStop() { Color = Color.WhiteSmoke, Offset = 1}; 
            gradientColor.GradientStops.Add(stop1); 
            gradientColor.GradientStops.Add(stop2); 
            gradientColor.GradientStops.Add(stop3); 
            gradientColor.GradientStops.Add(stop4); 
            gradientColor.GradientStops.Add(stop5); 
            gradientColor.GradientStops.Add(stop6); 
            ChartGradientColorCollection gradientColors = new ChartGradientColorCollection() 
            { 
                gradientColor 
            }; 
 
            series.ColorModel.ColorPalette = ChartColorPalette.Custom; 
            series.ColorModel.CustomGradientColors = gradientColors; 
                        
 
            ChartGradientColor secondGradient = new ChartGradientColor() 
            { 
                StartPoint = new PointF(0, 0.5f), 
                EndPoint = new PointF(1, 0.5f) 
            }; 
            ChartGradientStop secondstop1 = new ChartGradientStop() { Color = Color.WhiteSmoke, Offset = 0 }; 
            ChartGradientStop secondstop2 = new ChartGradientStop() { Color = Color.WhiteSmoke, Offset = 0.1f }; 
            ChartGradientStop secondstop3 = new ChartGradientStop() { Color = Color.Argb(80, 82, 160, 40), Offset = 0.1f }; 
            ChartGradientStop secondstop4 = new ChartGradientStop() { Color = Color.Rgb(82, 160, 40), Offset = 0.5f }; 
            ChartGradientStop secondstop5 = new ChartGradientStop() { Color = Color.WhiteSmoke, Offset = 0.5f }; 
            ChartGradientStop secondstop6 = new ChartGradientStop() { Color = Color.WhiteSmoke, Offset = 1 }; 
            secondGradient.GradientStops.Add(secondstop1); 
            secondGradient.GradientStops.Add(secondstop2); 
            secondGradient.GradientStops.Add(secondstop3); 
            secondGradient.GradientStops.Add(secondstop4); 
            secondGradient.GradientStops.Add(secondstop5); 
            secondGradient.GradientStops.Add(secondstop6); 
            ChartGradientColorCollection secondGradientColors = new ChartGradientColorCollection() 
            { 
                secondGradient 
            }; 
 
            series1.ColorModel.ColorPalette = ChartColorPalette.Custom; 
            series1.ColorModel.CustomGradientColors = secondGradientColors; 
 
            var index = 2; 
            EllipseAnnotation ellipse1 = new EllipseAnnotation() 
            { 
                X1 = index, 
                Y1 = Data[index].YValue, 
                Width = 10, 
                Height = 10, 
                FillColor = Color.White, 
                StrokeColor = Color.Rgb(133, 147, 48) 
            }; 
 
            LineAnnotation line1 = new LineAnnotation() 
            { 
                X1 = index, 
                Y1 = Data[index].YValue, 
                X2 = index, 
                Y2 = Data[index].YValue + 3, 
                StrokeColor = Color.Rgb(133, 147, 48), 
                StrokeWidth = 2, 
            }; 
 
            TextAnnotation text1 = new TextAnnotation() 
            { 
                X1 = index, 
                Y1 = line1.Y2, 
                Text = Data[index].YValue + "%", 
            }; 
            text1.LabelStyle.TextColor = Color.White; 
            text1.LabelStyle.BackgroundColor = Color.Rgb(133, 147, 48); 
 
            chart.Annotations.Add(line1); 
            chart.Annotations.Add(ellipse1); 
            chart.Annotations.Add(text1); 
 
            EllipseAnnotation ellipse2 = new EllipseAnnotation() 
            { 
                X1 = index, 
                Y1 = Data1[index].YValue, 
                Width = 10, 
                Height = 10, 
                FillColor = Color.White, 
                StrokeColor = Color.Rgb(82, 160, 40) 
            }; 
 
            LineAnnotation line2 = new LineAnnotation() 
            { 
                X1 = index, 
                Y1 = Data1[index].YValue, 
                X2 = index, 
                Y2 = Data1[index].YValue + 3, 
                StrokeColor = Color.Rgb(82, 160, 40), 
                StrokeWidth = 2, 
            }; 
 
            TextAnnotation text2 = new TextAnnotation() 
            { 
                X1 = index, 
                Y1 = line2.Y2, 
                Text = Data1[index].YValue + "%", 
            }; 
            text2.LabelStyle.TextColor = Color.White; 
            text2.LabelStyle.BackgroundColor = Color.Rgb(82, 160, 40); 
 
            chart.Annotations.Add(line2); 
            chart.Annotations.Add(ellipse2); 
            chart.Annotations.Add(text2); 
 
We have prepared a sample for this which can be downloaded from the following link. 
 
 
Output: 
 
 
You can refer the following user guide link to know more about annotation and gradiant colors. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Divya Venkatesan 
 


KE Konstantinos Evangelidis April 24, 2018 04:20 PM UTC

Thank you very much. You are the best. Very nice work. Works perfect.

DV Divya Venkatesan Syncfusion Team April 25, 2018 09:04 AM UTC

Hi Konstantinos, 
 
Thanks for your appreciation and please get back to us if you need any other assistance. As always, we will be happy to assist you. 
 
Regards, 
Divya Venkatesan                                   


Loader.
Up arrow icon