WhoAmI
Posts: 33
Joined: Tue Dec 01, 2015 1:22 pm

Two x-axis in Stacked column bar chart

Hello,

I need two categories for the x-axis in the stacked column bar chart with one of the categories aligned at 90 deg rotation just like the below attched kind of Highcharts but I didn't find any.

Is there any way to develop the similar kind of Highcharts?

Any links / code will be highly appreciated.

As to be on a rough note, I have noted all the x-axis as Test but please note that they are different :) (I mean the categories in x-axis should be Test1, Test2, Test3......)

This is what I get as an output as of now (The stacked bar chart is correct). I need the labels in x-axis category

Thanks in advance!!
Attachments
Unbenannt1.JPG
Unbenannt1.JPG (23.99 KiB) Viewed 6788 times
Highcharts.JPG
Highcharts.JPG (17.24 KiB) Viewed 6803 times
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Two x-axis in Stacked column bar chart

Hi WhoAmI,

What do you think about use plugin made by BlackLabel company to make it?
http://blacklabel.github.io/grouped_categories/

Best regards!
Sebastian Wędzel,
Highcharts Developer
WhoAmI
Posts: 33
Joined: Tue Dec 01, 2015 1:22 pm

Re: Two x-axis in Stacked column bar chart

Dear bastss,

I tried it but am unable to sort the categories as am having the data containing the whole months.

I have

Code: Select all

series: [<?php echo $seriesDetails;?>] // for plotting the graph

    xAxis: {
		min: 0,
		max: <?php echo $getCurrentMonth-1;?>,
        //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		
		
		categories: [{
        name: 'Jan',
        categories: [<?php echo $seriesDetails;?>]
    }, {
        name: 'Feb',
        categories: [<?php echo $seriesDetails;?>]
    }, {
        name: 'Mar',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'Apr',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'May',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'Jun',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'Jul',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'Aug',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'Sep',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'Oct',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'Nov',
        categories: [<?php echo $seriesDetails;?>]
    },{
        name: 'Dec',
        categories: [<?php echo $seriesDetails;?>]
    }],
	crosshair: true	
    },
    
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Two x-axis in Stacked column bar chart

WhoAmI,

I can't conclude anything from this. I don't know your php data. Please make online demo to illustrate problem.

Best regards!
Sebastian Wędzel,
Highcharts Developer
WhoAmI
Posts: 33
Joined: Tue Dec 01, 2015 1:22 pm

Re: Two x-axis in Stacked column bar chart

The below is my code.. Looks a bit of hypothetical data values but please let me know if you are unclear with any of this.

The output of the below code is attached in the first post of this thread. Thanks a lot for your help in advance

Code: Select all

<script>
Highcharts.chart('container', {
    xAxis: {
		min: 0,
		max: 10,
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		crosshair: true
		
    },
    yAxis: {
        min: 0,
		title: {
            text: '',
        }
    },

    chart: {
        type: 'column'
    },
	colors: ['#AA4643', '#89A54E', '#4572A7'],
   
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

	
    series: [{ name: 'Test', data: [{name:'Jan',y: 1}],stack: 'Test'},{ name: 'Testcase', data: [{name:'Jan',y: 2}],stack: 'Testcase'},{ name: 'Demo', data: [{name:'Jan',y: 0},{name:'Feb',y: 3}],stack: 'Demo'},{ name: 'Example', data: [{name:'Jan',y: 0},{name:'Feb',y: 2}],stack: 'Example'},{ name: 'Test', data: [{name:'Jan',y: 0},{name:'Feb',y: 3}],stack: 'Test'},{ name: 'Test', data: [{name:'Jan',y: 0},{name:'Feb',y: 1}],stack: 'Test'},{ name: 'Usecase', data: [{name:'Jan',y: 0},{name:'Feb',y: 1}],stack: 'Usecase'},{ name: 'UML', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 1}],stack: 'UML'},{ name: 'Demo', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 1}],stack: 'Demo'},{ name: 'Example', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 1}],stack: 'Example'},{ name: 'Example', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 2}],stack: 'Example'},{ name: 'Verification', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 1}],stack: 'Verification'},{ name: 'Example', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 4}],stack: 'Example'},{ name: 'Test', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 1}],stack: 'Test'},{ name: 'Verification', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 1}],stack: 'Verification'},{ name: 'Example', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 4}],stack: 'Example'},{ name: 'Verification', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 2}],stack: 'Verification'},{ name: 'Example', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 1}],stack: 'Example'},{ name: 'Testcase', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 1}],stack: 'Testcase'},{ name: 'Example', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 0},{name:'Jul',y: 1}],stack: 'Example'},{ name: 'Test', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 0},{name:'Jul',y: 1}],stack: 'Test'},{ name: 'UML', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 0},{name:'Jul',y: 1}],stack: 'UML'},{ name: 'UML', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 0},{name:'Jul',y: 0},{name:'Aug',y: 1}],stack: 'UML'},{ name: 'Verification', data: [{name:'Jan',y: 0},{name:'Feb',y: 0},{name:'Mar',y: 0},{name:'Apr',y: 0},{name:'May',y: 0},{name:'Jun',y: 0},{name:'Jul',y: 0},{name:'Aug',y: 0},{name:'Sep',y: 1}],stack: 'Verification'},]
	
});


</script>	

rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Two x-axis in Stacked column bar chart

Hi, WhoAmI!

It would be really easier and faster for us to find a proper solution for you if you created a simplified demo of your chart and put it onto jsFiddle. We are here to solve your issues related to Highcharts only so, please, do not bother us with unnecessary, extra work.

Have a good day and best regards!
Rafal Sebestjanski,
Highcharts Team Lead
WhoAmI
Posts: 33
Joined: Tue Dec 01, 2015 1:22 pm

Re: Two x-axis in Stacked column bar chart

Dear Rafal,

Please have a look into the below fiddle

https://jsfiddle.net/gkt6hu5m/

The datalabel has to be in the x-axis like in my 1st post

Could you please guide me here
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Two x-axis in Stacked column bar chart

WhoAmI,

Take a look at this example: https://jsfiddle.net/BlackLabel/bmw29d5v/

Best regards
Rafal Sebestjanski,
Highcharts Team Lead
simplyme
Posts: 22
Joined: Mon Feb 28, 2022 1:09 am

Re: Two x-axis in Stacked column bar chart

I tried following this https://jsfiddle.net/BlackLabel/bmw29d5v/ and it works on jsfiddle, but it the x-axis is not working on our webpage. Is there something I need to add when adding the code to our webpage? TIA!

Highcharts.chart('container', {
chart: {
borderColor: '#EBBA95',
borderRadius: 20,
borderWidth: 2,
type: 'column'
},
title: {
text: 'TITLE',
align: 'center'
},
xAxis: {
categories: [{name: 'TEST-01', categories: ['A', 'B', 'C', 'D', 'E', 'F']}, {name: 'TEST-02', categories: ['A', 'B', 'C', 'D', 'E', 'F']}, {name: 'TEST-03', categories: ['A', 'B', 'C', 'D', 'E', 'F']}, {name: 'TEST-04', categories: ['A', 'B', 'C', 'D', 'E', 'F']}, {name: 'TEST-05', categories: ['A', 'B', 'C', 'D', 'E', 'F']}]
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{name: 'All Tests Completed', data: [null, 2, 1101, null, null, 1073, 1, null, 39, 121, null, 2758, null, null, 97, null, 2, 1849, null, null, 42, 30, 3, 1488, null, null, 30, null, null, 1497]}]
});
Attachments
this_HC.png
this_HC.png (132.39 KiB) Viewed 886 times
simplyme
Posts: 22
Joined: Mon Feb 28, 2022 1:09 am

Re: Two x-axis in Stacked column bar chart

it is now working after adding the blacklabel script, but some x-axis labels are now showing. :(
Attachments
this_HC_01.png
this_HC_01.png (12.54 KiB) Viewed 874 times
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Two x-axis in Stacked column bar chart

Hello,

To show all the labels, set xAxis.labels.step property to 1 as you can see on the demo below.

Demo: https://jsfiddle.net/BlackLabel/oexqty9r/

Let me now, if you have any further questions!
Best regards
Jakub

Return to “Highcharts Usage”