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. Image for the cookie policy date

SFChart control with Labels to right of chart

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>

1 Reply

MP Michael Prabhu M Syncfusion Team 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 




Loader.
Up arrow icon