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

Customising appearance of bar chart.

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

expected result 

Current result


5 Replies

MK Muneesh Kumar G Syncfusion Team September 2, 2019 08:41 AM UTC

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:DataMarkerLabelStyle LabelPosition="Outer"/> 
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.   
Hope it helps you. 
Muneesh Kumar G 

BE Benjamin September 3, 2019 02:36 AM UTC

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

MK Muneesh Kumar G Syncfusion Team September 3, 2019 11:35 AM UTC

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.  
                    <chart:NumericalAxis IsVisible="False" ShowMajorGridLines="False" ActualRangeChanged="NumericalAxis_ActualRangeChanged" ShowMinorGridLines="False"/>         </chart:SfChart.SecondaryAxis> 
        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. 
            <chart:SfChart HorizontalOptions="FillAndExpand" HeightRequest="300" BackgroundColor="#5353c6" > 
. . . 
. . . 
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" > 
    . . . 
We have prepared the sample and it will be downloaded from below link. 
Muneesh Kumar G  

BE Benjamin September 4, 2019 03:03 AM UTC

Thanks for your assistance. my issue has now being fixed

MK Muneesh Kumar G Syncfusion Team September 4, 2019 04:11 AM UTC

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. 
Muneesh Kumar G  

Live Chat Icon For mobile
Up arrow icon