SFChart control with Labels to right of chart

[Dylan Wegner]

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]

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