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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customising appearance of bar chart.

Thread ID:

Created:

Updated:

Platform:

Replies:

147104 Sep 2,2019 04:11 AM UTC Sep 4,2019 04:11 AM UTC Xamarin.Forms 5
loading
Tags: SfChart
Benjamin
Asked On September 2, 2019 04:11 AM UTC

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

expected result 
expected

Current result
current


XAML Code
Code


Muneesh Kumar G [Syncfusion]
Replied On 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:BarSeries.DataMarker> 
 
                        <chart:ChartDataMarker.LabelStyle> 
 
                        <chart:DataMarkerLabelStyle LabelPosition="Outer"/> 
 
            </chart:ChartDataMarker.LabelStyle> 
 
            </chart:BarSeries.DataMarker> 
 
</chart:BarSeries> 
 
 
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. 
 
Thanks, 
Muneesh Kumar G 


Benjamin
Replied On 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
label


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

Muneesh Kumar G [Syncfusion]
Replied On 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.  
  
[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. 
  
  
Regards,   
Muneesh Kumar G  
 


Benjamin
Replied On September 4, 2019 03:03 AM UTC

Thanks for your assistance. my issue has now being fixed

Muneesh Kumar G [Syncfusion]
Replied On 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. 
 
Thanks,  
Muneesh Kumar G  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon