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.
Regards,
Vijayabharathi
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?
Regards,
Vijayabharathi
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,
[JS]
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.
Regards,
Vijayabharathi
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,
[JS]
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;
seriesCollection[0].isEmpty=true;
seriesCollection[args.model.series[i].points.length-1].isEmpty=true;
}
}
Please let us know if you need further assistance.
Regards,
Vijayabharathi