1. Home
  2. Forum
  3. Xamarin.Forms
  4. Customization Request for Syncfusion Line Chart in Xamarin.Forms

Customization Request for Syncfusion Line Chart in Xamarin.Forms

Dear Syncfusion Team,


I am writing to request assistance with a customization for a line chart in Xamarin.Forms using your Syncfusion controls. I have attached a screenshot of the design I am trying to achieve to this email for reference.


In the line chart, I would like to add two horizontal lines with labels, one on the left side and the other on the right side of the chart. These lines will serve as reference lines to highlight specific values on the chart. Each line should have a label indicating its value.


Here is a brief description of the customization I need:


Left Horizontal Line:


Position: This line should be placed on the left side of the chart.

Label: It should have a label on the left end indicating the value associated with this line.

Right Horizontal Line:


Position: This line should be placed on the right side of the chart.

Label: It should have a label on the right end indicating the value associated with this line.

I have already integrated the Syncfusion line chart into my Xamarin.Forms application, but I am not sure how to achieve this specific customization. Your guidance and assistance in implementing this feature would be greatly appreciated.


Please find the attached screenshot for a visual representation of my requirements.


lineChart_.png


If you require any further details or information to assist with this customization, please do not hesitate to ask. I look forward to your response and appreciate your support in achieving this design.


Thank you for your time and assistance.


Regards,


Yaseen Wakeel


Attachment: lineChartRequiredDesign_8675da72.zip

1 Reply
NT Nitheeshkumar Thangaraj Syncfusion Team September 5, 2023 10:35 AM UTC

Hi Yaseen,


With the input you provided, we'd like to inform you that your requirement has been successfully achieved using the LabelStyle with HorizontalTextAlignment="Start." Below, you will find the code snippet and an image illustrating the outcome:


<chart:SfChart.ChartAnnotations>

            <chart:HorizontalLineAnnotation StrokeColor="Green" Y1="{Binding HorizontalLine.Y1}" Text="{Binding HorizontalLine.Y1}">

                <chart:HorizontalLineAnnotation.LabelStyle>

                    <chart:ChartAnnotationLabelStyle HorizontalTextAlignment="Start" TextColor="White" BackgroundColor="Green" FontSize="16" VerticalTextAlignment="Center"></chart:ChartAnnotationLabelStyle>

                </chart:HorizontalLineAnnotation.LabelStyle>

            </chart:HorizontalLineAnnotation>

            <chart:HorizontalLineAnnotation StrokeColor="Gray" Y1="{Binding HorizontalLine1.Y1}" ShowAxisLabel="True">

                <chart:HorizontalLineAnnotation.AxisLabelStyle>

                    <chart:ChartAnnotationLabelStyle BackgroundColor="Blue" TextColor="White" FontSize="16"></chart:ChartAnnotationLabelStyle>

                </chart:HorizontalLineAnnotation.AxisLabelStyle>

            </chart:HorizontalLineAnnotation>

        </chart:SfChart.ChartAnnotations>



Further clarification, we have attached the sample in below.



We hope this solution aligns with your needs. If you have any more questions or require further assistance, please feel free to ask.


Regards,

Nitheeshkumar.


Attachment: AnnotationSample_38b40460.zip


Loader.
Up arrow icon