We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SFChart control with Labels to right of chart

Thread ID:

Created:

Updated:

Platform:

Replies:

140981 Nov 16,2018 05:31 PM UTC Nov 21,2018 10:23 AM UTC Xamarin.Forms 1
loading
Tags: SfChart
Dylan Wegner
Asked On November 16, 2018 05:31 PM UTC

Hello, 

I am working with the SFChart and I am looking to create a chart that looks like the following: 

Currently the value and label to the right of the chart are in a list view and not part of the actual chart. Because of this the alignment is all off as you can see. I am wondering if there is a way to get the labels to the right out of the list view and be a piece of the actual chart. Perhaps using Data Markers? Any help would be appreciated. I have included the code and list view below for reference. 

 <Grid VerticalOptions="Start">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="4*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <!--Chart (SyncFusion) -->
                <chart:SfChart HorizontalOptions="FillAndExpand"
                               VerticalOptions="FillAndExpand"
                               Grid.Column="0"
                               Margin="0,10"
                               x:Name="conformChart">
                    <!--Trait Name Axus-->
                    <chart:SfChart.PrimaryAxis>
                        <chart:CategoryAxis ShowMajorGridLines="True"
                                            EdgeLabelsDrawingMode="Center"
                                            AutoScrollingMode="Start"
                                            LabelPlacement="BetweenTicks" />
                    </chart:SfChart.PrimaryAxis>
                    <!--Trait Value Axis-->
                    <chart:SfChart.SecondaryAxis>
                        <chart:NumericalAxis Minimum="-2"
                                             OpposedPosition="True"
                                             Maximum="2"
                                             Interval="1">
                        </chart:NumericalAxis>
                    </chart:SfChart.SecondaryAxis>
                    <chart:SfChart.Series>
                        <!--Bar Chart-->
                        <chart:BarSeries x:Name="ConformationBarChart"
                                         ItemsSource="{Binding ChartData}"
                                         XBindingPath="TraitName"
                                         YBindingPath="TraitValue"
                                         Color="{StaticResource AppColorPrimaryLight}"
                                         EnableAnimation="True">
                        </chart:BarSeries>
                    </chart:SfChart.Series>
                </chart:SfChart>

                <ListView Grid.Column="1"
                          ItemsSource="{Binding ChartDataValuesAndDescriptors, Mode=TwoWay}"
                          RowHeight="35"
                          Margin="{Binding Converter={StaticResource ConformationListViewMarginConverter}}"
                          SeparatorVisibility="None"
                          IsEnabled="False">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid ColumnSpacing="0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <Label Text="{Binding TraitValue, Mode=TwoWay}"
                                           VerticalOptions="Start"
                                           HorizontalTextAlignment="Start"
                                           VerticalTextAlignment="Start"
                                           Margin="2.5,0"
                                           FontSize="10"
                                           FontAttributes="Bold" />

                                    <Label Text="{Binding TraitValueText, Mode=TwoWay}"
                                           Grid.Column="1"
                                           FontSize="10"
                                           Margin="2.5,0"
                                           FontAttributes="Bold"
                                           HorizontalTextAlignment="Start"
                                           VerticalTextAlignment="Start"
                                           VerticalOptions="Start" />
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>

Michael Prabhu M [Syncfusion]
Replied On November 21, 2018 10:23 AM UTC

Hi Dylan, 

Greetings from Syncfusion. We have achieved your requirement as a work around by adding another series and setting a CategoryAxis to series X-axis and setting transparent color to that series. Please refer below code snippet. 

Code snippet [XAML]:   
<chart:SfChart.Series> 
                 
                <chart:BarSeries x:Name="column" ItemsSource="{Binding Data}" XBindingPath="XValue1" YBindingPath="YValue" > 
                </chart:BarSeries> 
 
                <chart:BarSeries x:Name="column1" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" Color="Transparent" EnableTooltip="False" ShowTrackballInfo="False" > 
                    <chart:BarSeries.XAxis> 
                        <chart:CategoryAxis Interval="1" OpposedPosition="True" IsInversed="True" LabelPlacement="BetweenTicks" LabelCreated="CategoryAxis_LabelCreated" /> 
                    </chart:BarSeries.XAxis> 
                </chart:BarSeries> 
</chart:SfChart.Series> 

And we have prepared a sample for your requirement and you can download the sample from the below link. 

Sample: 220990 

Screenshot: 
 

Thanks, 
Michael 




CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;