How to show different labels on multiple x-axis for bar chart (ejs-chart)
How can I add multiple x-axis for the Bar Chart, and also show different labels on those multiple x-axis as shown in the image attached.
SIGN IN To post a reply.
16 Replies
Hi Priyanka,
Greetings from Syncfusion.
We suggest you to use axes property to render multiple axis in chart and axisLabelRender event to customize the axis labels based on your requirement. Please check with the below sample and snippet.
|
<ejs-chart [axes]='axis' (axisLabelRender)='axisLabelRender($event)'>
<e-series-collection>
<e-series xAxisName='xAxis' ></e-series>
</e-series-collection>
</ejs-chart>
public axis: Object = [{
rowIndex: 0,
name: 'xAxis'
}];
public axisLabelRender(args: IAxisLabelRenderEventArgs): void{
if(args.axis["name"] == "primaryXAxis"){
args.text = args.value == 0 ? "23" : (args.value == 1 ? "22": args.text);
}
if(args.axis["name"]== "xAxis"){
args.text = args.value == 0 || args.value == 1 ? "None": args.text;
}
}; |
UG :
Kindly revert us if you have any concerns.
Regards,
Durga G
Hi, how can I add multiple x-axis with different labels in table format for bar chart as shown in the attached image.
Hi Priyanka,
Your requirement can be achieved using chart multilevel labels. Please check with the below sample and snippet.
|
public primaryXAxis: Object = {
multiLevelLabels: [
{
border: { type: 'Rectangle' },
categories: [
{ start: -0.5, end: 0.5, text: 'Seedless', },
{ start: 0.5, end: 2.5, text: 'Seeded', },
//….
]
}, {
border: { type: 'Rectangle' },
categories: [
{ start: -0.5, end: 2.5, text: 'In Season', },
{ start: 2.5, end: 5.5, text: 'Out of Season', },
//….
]
}]
}; |
Kindly revert us if you have any concerns.
Regards,
Durga G
Hi, I want to implement this type of chart using multilevel labels.
How can I implement this chart using multiLevelLabes without using the start and end values as shown in the code below. Or is there any other way to implement this type of chart?
public primaryXAxis: Object = {
multiLevelLabels: [
{
border: { type: 'Rectangle' },
categories: [
{ start: -0.5, end: 0.5, text: 'Seedless', },
{ start: 0.5, end: 2.5, text: 'Seeded', },
//….
]
}
Hi Priyanka,
As of now it is not possible to achieve your requirement without using start and end values in the multiLevelLabels. Hence we have dynamically updated the text of the categories using load event in the chart. Please find the sample, code snippet and screenshot below.
Code Snippet:
|
// add your additional code here
public start = -0.5;
public end = 1.5;
public index = 0;
public categoryList: object[] = [];
public labelData: String[] = [
'Seedless',
'Seeded',
'Seedless',
'Seeded',
'Seedless',
'Seeded',
'Seedless',
'Seeded'
];
public load(args: ILoadedEventArgs): void {
for (var i = 0; i < this.labelData.length; i++) {
this.categoryList.push({
start: this.start + this.index,
end: this.end + this.index,
text: this.labelData[i]
});
this.index += 2;
}
args.chart.primaryXAxis.multiLevelLabels[0].categories = this.categoryList;
}
// add your additional code here |
Screenshot:
If still this is not your exact requirement. kindly revert us with more information which will be more helpful for further analysis and provide you the solution sooner.
Regards,
Srihari M
Thank you for your reply. But I am facing another issue in the chart that you have replied. I want the data from seedless to seeded part and to show till grapes data (color - light green, value - 13) on the first page and rest of the data on second page starting from seeded pears (color - sky blue, value - 42) until the seedless grapes (color - purple, value - 28) .
Below is my code which I have tried :-
public xAxis: any = {
valueType: 'Category',
labelRotation: 90,
border: { width: 1, type: 'Rectangle' },
textStyle: { size: '12px', color: 'grey' },
isIndexed: true,
interval: 1,
majorGridLines: { width: 0 },
maximum: 9,
isInversed: true,
majorTickLines: { width: 0 },
multiLevelLabels: [
{
border: { width: 1, type: 'Rectangle' },
textStyle: { size: '12px', color: 'grey' },
categories: []
},
{
border: { width: 1, type: 'Rectangle'},
textStyle: { size: '12px', color: 'grey' },
categories: []
}
]
};
for (var j = 0; j < this.xAxis.multiLevelLabels.length; j++) {
let start = -0.5;
let end = 0.5;
let arr = [];
let data = [];
if (j == 0) {
data = data1;
}
else {
data = data2;
}
for (var i = 0; i < data.length; i++) {
arr.push({
start: start1,
end: (end1 + mainData[i].length) - 1,
text: data[i]
});
start1 = (end1 + mainData[i].length) - 1;
end1 = end1 + mainData[i].length;
}
this.xAxis.multiLevelLabels[j].categories = arr;
}
This is my Page 1 which is showing data upto end point - 9.5 and one of the data is at second page which is
not visible on Page 2 as it is not shifting on the Page 2 and showing the data of Page 1 only.
Following are the outputs :-
Please reply ASAP.
Thanks
Hi Priyanka,
As of now we don’t have pagination support for chart. We suggest you to render the separate chart with required multilevel labels while clicking the 2nd button. We have modified sample based on your requirement. Please check with below snippet and sample.
|
public first(args){
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
}
public second(args){
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "block";
} |
First button click
Second button click
Kindly revert us if you have any concerns.
Regards,
Durga GHi Priyanka,
We suggest you to change the zoomFactor and zoomPosition to view chart in two different pages with single set of datasource. We have attached modified sample for your reference.
|
@ViewChild('chart')
public chart: ChartComponent;
public first(args){
this.chart.primaryXAxis.zoomFactor = 0.8; // number of points to be displayed/total number of points(8/10)
this.chart.primaryXAxis.zoomPosition = 1;
this.chart.refresh();
}
public second(args){
this.chart.primaryXAxis.zoomFactor = 0.2;//(2/10)
this.chart.primaryXAxis.zoomPosition = 0;
this.chart.refresh();
} |
Page 1 :
Page 2 :
Kindly revert us if you have any concerns.
Regards,
Durga G
Hi, if we use isInversed property in chart then it shows negative axis. How can we achieve page change property using zoomFactor and zoomPosition which you suggest.
Sample Link :- https://stackblitz.com/edit/angular-yqtfse-beqp42
public xAxis: any = {
valueType: 'Category',
title: 'abcd',
interval: 1,
maximum: 9,
minimum: 0,
isInversed: false
};
We use minimum and maximum for pagination and it works fine but if data is odd then it shows half string on first page and other half string on second page. But if page is change then we have to show 2 different string please refer below screenshot.
Actual output :-
Expected output :-
How can we achieve this. Kindly revert ASAP.
Thanks
Priyanka
SIGN IN To post a reply.
