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
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Datalabels not displaying well

Thread ID:





128871 Feb 13,2017 06:08 PM UTC Feb 14,2017 07:04 AM UTC jQuery 1
Tags: ejChart
Asked On February 13, 2017 06:08 PM UTC

I have some problems on displaying data labels on column stacked bars.

Here there is a link with a custom chart with this problem:

I've enabled the "enableSmartLabels" option for all data labels except the blue one where I set it as "false".
in the second chart ("st 2011") the blue label is not displaying well, the top is cut.
If i use "enableSmartLabels" also for the blue label, the blue label in second chart is not displayed.

can you help me?

thank you

Dharanidharan Dharmasivam [Syncfusion]
Replied On February 14, 2017 07:04 AM UTC

Hi Luca, 

Thanks for using Syncfusion product. 

We have analyzed your query with the provided sample. We would like to let you know that, only the minimum and maximum values of the data points are considered for axis range calculation. And the data label height or width will not be considered, thus the data label moves out of chart area and will get clipped. This is the current behavior of dataLabel.  

But your requirement can be achieved by following any one of the below methods. 

Method 1: You can use rangePadding property to the primaryYAxis. This will add the interval of axis with minimum and maximum values. Kindly find the code snippet below. 

primaryYAxis: { 
                    rangePadding: "additional" 


For more information about rangePadding, kindly use the below link. 

Method 2: As workaround by using axesRangeCalculate event. In this event, you can customize the range of the axis. Find the code snippet below. 
            axesRangeCalculate: "axisRange", 

function axisRange(sender) { 
            if (sender.data.axis.orientation == "vertical") 
                sender.data.range.max += sender.data.range.interval; 


Method 3: You can use plotOffset property for the primaryYAxis. This property will set the padding for the primaryYAxis. Find the code snippet below. 

primaryYAxis: { 
                    plotOffset: 20, 


Method 4: You can specify the verticalTextAlignment property of dataLabel to near, so that it won’t get clipped. 

"marker": { 
              "dataLabel": { "textPosition": "top", "verticalTextAlignment" : "near" } 

Or else you can specify the offset property of dataLabel with negative value.  

"marker": { 
              "dataLabel": { "textPosition": "top", offset:-10 } 

For your reference we have attached the sample in the below location. 



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