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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Range Padding for String Labels on the axis

Thread ID:





112501 Sep 26,2013 12:28 AM UTC Oct 17,2013 05:40 AM UTC JavaScript 7
Tags: ejChart
Asked On September 26, 2013 12:28 AM UTC

This was the initial graph that got rendered, and as you
can see the label's are in between the ticks.

So to make the labels appear on the ticks
I added labelPlacement: 'onTicks', which causes the
graph to become this.

As you can see the range padding at the start and end goes away.
I am able to apply range padding on the Y-Axis by using rangePadding: 'additional'.
But the same does not work on the X-Axis labels as they are string ( as opposed to being integers ). How to I simulate this behavior for string labels??

Vijayabharathi K [Syncfusion]
Replied On September 27, 2013 08:33 AM UTC

Hi Pradeep,


Thanks for using Syncfusion products.


By default, the “RangePadding” support only for double and datetime value type axis. The category axis (String Labels on the axis) is render the label in indexed position of points. This is default behaviour of category axis.  So, we are unable to achieve the “RangePadding” behaviour for category axis.


Please let us know if you need any further assistance.




Replied On October 3, 2013 12:32 AM UTC

Oh, thats a bummer, coz sometimes my string labels are long, and without rangePadding, placing them on ticks makes them come really close or overlap on the y axis at '0'. :-(

Vijayabharathi K [Syncfusion]
Replied On October 3, 2013 11:06 AM UTC

Hi Pradeep,


We regret for the inconvenience. You can use “betweenTicks” option for "labelPlacement" property to render the series with 0.5 padding from indexed position for category axis. Also,  could you please share more information for your reported  issue(on ticks makes them come really close or overlap on the y axis at '0') or provide screenshot? Is that the long text X-axis label overlapped  with Y-Axis?




Replied On October 8, 2013 05:06 AM UTC

Ok I apologize for not being clear on that.
So what really happens is that, since I cannot provide range padding
for string labels, the graph that renders, collapses along the y axis
as shown below.

Here is a bar graph, and as you can see, on either of the ends,
the graph is getting cropped. So I cannot place them on the ticks
even if i wanted to.

And same happens on the line graph as well. but this is even weirder,
as the line from the first overlapping point never gets drawn.

Here are the correctly rendered graphs when label is place in between ticks

Hope that is clear?

Vijayabharathi K [Syncfusion]
Replied On October 10, 2013 10:59 AM UTC

Hi Pradeep,


Thanks for the update.


We suggest you to add  empty points in series for achieve your requirements as a workaround. We have attached the sample for this workaround. In this sample, we have added empty point in first and last position of  point collection in load event and enable “hidePartialLabels” property of X-Axis to avoid ticks and labels for  these edge points. Please refer the below code snippet to achieve this,



               function chartload(args){

                                                var seriesCollection=args.model.series[0].points;

                                                // Add empty point to first point in point collection

                                                seriesCollection.unshift({x:"", y: 0 , isEmpty:true});

                                                // Add empty point to last point in point collection

                                                seriesCollection.push({x:"", y: 0, isEmpty:true });



Also, we have planned to include  the “PlotOffset” behaviour to providing custom padding support to axis for upcoming release.


Please let us know, if you have any further assistance.





Replied On October 14, 2013 06:37 AM UTC

I have 3 lines in my graph, and I use the following code in my
on chart load

// functions for chart load
function onLineChartLoad(sender) {
    sender.model.series[0].dataSource = { data: graphQRData, xName: "x", yNames: ["y"] };
    sender.model.series[1].dataSource = { data: graphNFCData, xName: "x", yNames: ["y"] };
    sender.model.series[2].dataSource = { data: graphTotalData, xName: "x", yNames: ["y"] };

if I try to write

sender.model.series[0].points, it shows,
that it is "undefined"

Please guide me through on how to use your code, when using a data source.
the data is in the format [{x: "label", y: value}].
Here is the full code

                    //labelPlacement: 'onTicks',
                    title: { text: toTitleCase(groupValue).toUpperCase(), font: { fontFamily: 'Oswald', size: '17px', color:'#595959'}},
                    font : { size: '12px', fontFamily: 'Open Sans', color:'#333333'},
                    majorGridLines: { visible: true, color: "rgb(89,89,89)" }
                    rangePadding: 'additional',
                    title: { text: 'NO OF INTERACTIONS', font: { fontFamily: 'Oswald', size: '17px', color:'#595959'}},
                    font: { size: '12px', fontFamily: 'Open Sans', color:'#333333'}
                commonSeriesOptions: {
                    type: 'line',
                    animation: true,
                        shape: 'circle',
                            height: 10,
                            width: 10
                        visible: true,
                    style: { borderWidth: 2 },
                series: [{
                    name: 'QR Scans',
                    style: { interior: secondaryColor },
                    pointsTooltipTemplateID: 'qr-tooltip'
                    name: 'NFC Taps',
                    style: { interior: primaryColor },
                    pointsTooltipTemplateID: 'nfc-tooltip'
                    name: 'Total',
                    style: { interior: primaryColorDark },
                    pointsTooltipTemplateID: 'total-tooltip'
                load: "onLineChartLoad",
                showTooltip: true,
                size: { height: scrollH },
                legend: { visible: true, shape: 'circle', position: 'Right', alignment: 'Near', itemSize: { width: 8.5, height: 8.5 }, textOption: { font: { fontFamily: 'Open Sans', size: '13px', color: '#333333' } } }
                //zooming: { enabled: true, type: 'x', enableMouseWheel: false }

Vijayabharathi K [Syncfusion]
Replied On October 17, 2013 05:40 AM UTC

Hi Pradeep,


Thanks for the update.


We have modified this workaround for data binding. We have used “preRender” event to enable the “isEmpty”  property  for first and last point in series. Please find the attachment and code snippet in the below,



function chartload(sender) {

              //Get data information                  

                var dataSourceModified=window.data;

                 // Add empty point to first point in point collection

                 dataSourceModified.unshift({  "FoodName": "", Value1: 0, Value2: 0, Value3: 0 });

                 // Add empty point to last point in point collection

                 dataSourceModified.push({  "FoodName": "", Value1: 0, Value2: 0, Value3: 0 });

                 sender.model.series[0].dataSource = { data: dataSourceModified , xName: "FoodName", yNames: ["Value1"] };

                sender.model.series[1].dataSource = { data: dataSourceModified , xName: "FoodName", yNames: ["Value2"] };

                sender.model.series[2].dataSource = { data: dataSourceModified , xName: "FoodName", yNames: ["Value3"] };



      function chartpreload(args) {

                    for(var i=0;i<args.model.series.length;i++){

                                var seriesCollection = args.model.series[i].points;






Please let us know if you need further assistance.






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