1. Home
  2. Forum
  3. Xamarin.Forms
  4. Include Chart Layout into different XAML

Include Chart Layout into different XAML

Hi,

i have created a layout page which is xaml. I have also created one more xaml page with just sfchart inside it. I am trying to include the chart XAML into the main XAML.

Below is how i have tried

<Grid HorizontalOptions="FillAndExpand" HeightRequest="200" WidthRequest="450" Margin="10,0,10,0" IsVisible="True" >
          <graph:GraphLayout />
</Grid>

i gave the namespace as xmlns:graph="clr-namespace:MyProject.Views.Layouts"

This doesn't show me any graph and no errors either.

PS : If i place the actual XAML with just label inside my   " <graph:GraphLayout />" it works fine. (Shows the label).

7 Replies
DV Divya Venkatesan Syncfusion Team March 8, 2018 04:25 PM UTC

Hi Joseph, 
 
Thanks for using Syncfusion products. 
 
We suspect that you have not set the VerticalOptions and HorizontalOptions for chart. Please set the VerticalOptions and HorizontalOptions as shown in the below code snippet. 
 
Xaml: 
 
<chart:SfChart VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" > 
 
. . . 
 
</chart:SfChart> 
 
 
C#: 
chart.VerticalOptions = LayoutOptions.FillAndExpand; 
chart.HorizontalOptions = LayoutOptions.FillAndExpand; 
 
If you still reproduce the problem, please provide us more information or chart related code snippets used in your application. Which would be helpful for us to give better solution. 
 
Regards, 
Divya Venkatesan 
 


JM Joseph Michael March 12, 2018 09:38 AM UTC

Hi Divya,

Yes it was indeed the horizontaloptions issue. I have set it to Fill and Expand it worked fine. Thanks. 
I have one more question regarding binding the interval and maximum values into the chart. 

i have tried binding them with the item source of the chart, but there is no affect in the interval and maximum values that i set. 

Could you provide a sample where the interval and maximum values are bounded with the chart item source?

Also, How to Bind a Y1 value to HorizontalLineAnnotation?

Thanks
Hemanth


DV Divya Venkatesan Syncfusion Team March 13, 2018 09:27 AM UTC

Hi Joseph, 
 
Query 1: Could you provide a sample where the interval and maximum values are bounded with the chart item source? 
 
We can achieve your requirement by setting Interval and Maximum property in axis as follows.  
 
Code snippet [XAML]: 
 
<chart:NumericalAxis Interval="{Binding Interval}" Maximum="{Binding Maximum}"/> 
 
Code snippet [C#]: 
 
numericalAxis.SetBinding(NumericalAxis.IntervalProperty,"Interval"); 
numericalAxis.SetBinding(NumericalAxis.MaximumProperty, "Maximum"); 
 
You can refer the following user guide link for more details. 
 
We have prepared a sample based on this, please find the sample from the following location.  
 
Query 2: How to Bind a Y1 value to HorizontalLineAnnotation? 
 
We have prepared a sample by extending SfChart in ChartExt.cs file to set the BindingContext for Annotation. You can bind the Y1 value of HorizontalLineAnnotation as shown in the below code snippet. 
 
Code snippet[XAML]: 
 
<chart:HorizontalLineAnnotation Y1="{Binding Y1}"/> 
 
Code snippet[C#]: 
 
annotation.SetBinding(ChartAnnotation.Y1Property,"Y1"); 
 
Please download the sample from the following link. 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Divya Venkatesan 
 


JM Joseph Michael March 14, 2018 07:30 AM UTC

Hi Divya,
Thanks for the example, now i can bind the interval and maximum values.
A question regarding Y axis value precision , When i tried to set interval for 0.002 with maximum values as 0.02 . The Y axis values does show up accurately. This is how it looks,(as attached).

Also can i bold the X axis and Y Axis values?

Attachment: graphdata_e63bb166.zip

DV Divya Venkatesan Syncfusion Team March 14, 2018 11:13 AM UTC

Hi Joseph, 
 
Query 1: The Y axis values does show up accurately. 
You can achieve this requirement by setting LabelFormat for axis labels as shown in the below code snippets. 
 
Code snippet[Xaml]: 
<chart:NumericalAxis.LabelStyle> 
    <chart:ChartAxisLabelStyle LabelFormat="0.###"/> 
</chart:NumericalAxis.LabelStyle> 
 
Code snippet[C#]: 
numericalAxis.LabelStyle.LabelFormat = "0.###"; 
 
Query 2: Also can i bold the X axis and Y Axis values? 
You can achieve this requirement by setting FontAttributes property of ChartAxisLabelStyle as shown in below code snippets. 
 
Code snippet[Xaml]: 
<chart:NumericalAxis.LabelStyle> 
    <chart:ChartAxisLabelStyle FontAttributes="Bold"/> 
</chart:NumericalAxis.LabelStyle> 
 
Code snippet[C#]: 
numericalAxis.LabelStyle.FontAttributes = FontAttributes.Bold; 
 
Please let us know if you need any further assistance. 
 
Regards, 
Divya Venkatesan 
 


JM Joseph Michael March 15, 2018 06:21 AM UTC

Thanks Divya. That works.

DV Divya Venkatesan Syncfusion Team March 15, 2018 11:47 AM UTC

Hi Joseph,

Thanks for the update. We are glad to know that the given solution works.

Please let us know if you need any further assistance.

Regards,
Divya Venkatesan

Loader.
Up arrow icon