Customising appearance of bar chart.

[Benjamin]

How to do add a label at the end of the bar and also reduce the spacing between the bars

expected result 

Current result

XAML Code

[Muneesh Kumar G]

Hi Benjamin, 

 

Greetings from Syncfusion.  

 

Query 1: How to do add a label at the end of the bar? 

 

We have analyzed your requirement and you can achieve this by setting LabelPosition as Outer as per the below code snippet.  

 

Code snippet 

<chart:BarSeries .. > 

 

            <chart:BarSeries.DataMarker> 

 

                        <chart:ChartDataMarker.LabelStyle> 

 

                        <chart:DataMarkerLabelStyle LabelPosition="Outer"/> 

 

            </chart:ChartDataMarker.LabelStyle> 

 

            </chart:BarSeries.DataMarker> 

 

</chart:BarSeries> 

 

UG : https://help.syncfusion.com/xamarin/sfchart/datamarker#label-position 

 

Query 2: How to reduce the spacing between the bars? 

 

We have analyzed this requirement and we have prepared KB articles for change series bar width size already. Please refer below KB link to know more details on series binding.   

  

https://www.syncfusion.com/kb/5104/how-to-increase-or-decrease-the-width-of-column-series 

  

Hope it helps you. 

 

Thanks, 

Muneesh Kumar G 

[Benjamin]

with regards to query 1, it seems that i am only able to get the label for 1 of the bar to show outside, not sure if it is due to the bar being too long. is there anyway to solve this? also can i remove the background color? tried setting it at the chart:DataMarker.LabelStyle, it does not seems to work

As for the 2nd query, what I mean is to reduce the space of the red box area in the image below

[Muneesh Kumar G]

Hi Benjamin,  

  

Query 1: How to do add a label at the end of the bar?  

 

In your case there is no space to render the label at end of bar. So, the labels overlapped to the bar segment. by increasing the secondary axis height little more using ActualRangeChanged event we can place the label at the end of the segment.  

  

[XAML] 

<chart:SfChart.SecondaryAxis> 

                    <chart:NumericalAxis IsVisible="False" ShowMajorGridLines="False" ActualRangeChanged="NumericalAxis_ActualRangeChanged" ShowMinorGridLines="False"/>         </chart:SfChart.SecondaryAxis> 

  

[C#] 

        private void NumericalAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 

        { 

            var delta = (double)e.ActualMaximum - (double)e.ActualMinimum; 

            e.ActualMaximum = e.VisibleMaximum = (double)e.ActualMaximum + (0.15 * delta); // increase 15% of axis height compare to default. 

        } 

  

Query 2: How to reduce the spacing between the bars?  

 

As we are using CategoryAxis, the interval between bar segments will divide evenly based on the chart height. By specifying fixed height for the chart, we can manage the space between the bars. 

  

<StackLayout> 

            <chart:SfChart HorizontalOptions="FillAndExpand" HeightRequest="300" BackgroundColor="#5353c6" > 

. . . 

. . . 

</StackLayout> 

  

Note: The Width property used to specify the rectangle bar size, the default value of the width is 0.8, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available 

  

<chart:BarSeries ItemsSource="{Binding BarSeriesCollection_One}" XBindingPath="Department" Width="0.3" YBindingPath="YValues" Color="#33d6ff" > 

    . . . 

</chart:BarSeries> 

  

  

 

  

We have prepared the sample and it will be downloaded from below link. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleSample-1323741775.zip  

  

Regards,   

Muneesh Kumar G  

 

[Benjamin]

Thanks for your assistance. my issue has now being fixed

[Muneesh Kumar G]

Hi Benjamin, 

 

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Thanks,  

Muneesh Kumar G