Position of label over bar in bar chart and 100% stack bar chart

[Brian Swanson]

I am looking to use the Bar Chart and the 100% Stacked Bar Chart in my mobile app with the label above the corresponding bar. I need to do this conserve screen space as some of the labels might be long. I would like the Bar Chart and 100% Stacked Bar to be formatted similarly to this:

Is there a way to have the labels like this in these charts?

Thank you in advance for any help.

[Brian Swanson]

I am looking to use the Bar Chart and the 100% Stacked Bar Chart in my mobile app with the label above the corresponding bar. I need to do this conserve screen space as some of the labels might be long. I would like the Bar Chart and 100% Stacked Bar to be formatted similarly to this:

Is there a way to have the labels like this in these charts?

Thank you in advance for any help.

Here is a link to the pasted image which might not be showing:

[Michael Prabhu M]

Hi Brian, 

 

Greetings from Syncfusion, we have analyzed your requirement and it can be achieved by using BarSeries and DataMarker as like in below code snippet. 

 

Code snippet [XAML]:   

<ContentPage.Resources> 

        <ResourceDictionary> 

            <DataTemplate x:Key="dataMarkerTemplate"> 

                <StackLayout Orientation="Horizontal"> 

                    <Label Text="{Binding XValue}" VerticalOptions="Center" FontSize = "15"/> 

                </StackLayout> 

            </DataTemplate> 

        </ResourceDictionary> 

    </ContentPage.Resources> 

 

<chart:BarSeries x:Name="series1" Width="0.5" Color="Transparent"  ItemsSource="{Binding Data}"  XBindingPath="XValue" YBindingPath="YValue2"> 

                    <chart:BarSeries.DataMarker> 

                        <chart:ChartDataMarker ShowLabel="True" LabelTemplate="{StaticResource dataMarkerTemplate}"> 

                            <chart:ChartDataMarker.LabelStyle> 

                                <chart:DataMarkerLabelStyle LabelPosition="Outer" /> 

                            </chart:ChartDataMarker.LabelStyle> 

                        </chart:ChartDataMarker> 

                    </chart:BarSeries.DataMarker> 

</chart:BarSeries> 

 

 

Code snippet [C#]:   

BarSeries barSeries = new BarSeries() 

{ 

    ItemsSource = viewModel.Data, 

    XBindingPath = "XValue", 

    YBindingPath = "YValue2", 

};  

barSeries.DataMarker = new ChartDataMarker(); 

barSeries.DataMarker.ShowLabel = true; 

barSeries.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Outer; 

 

DataTemplate dataMarkerTemplate = new DataTemplate(() => 

{ 

   StackLayout stack = new StackLayout(); 

   Label label = new Label(); 

   label.SetBinding(Label.TextProperty, "XValue"); 

   label.FontSize = 15; 

   label.VerticalOptions = LayoutOptions.Center; 

   stack.Children.Add(label); 

   return stack; 

}); 

 

barSeries.DataMarker.LabelTemplate = dataMarkerTemplate; 

chart.Series.Add(barSeries); 

 

 

We have also prepared a sample based on this and it can be downloaded from the link below. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/212147/ze/139129-1583574505 

Hope this helps. 

 

Thanks, 

Michael