It is difficult to implement complex grouped charts

[KIMSAMPYO]

I want to implement a grouped chart like the attached picture.

I've tried making it as much as possible, but I'm not sure how to fix it.

Help please.
Please kindly answer.



------------------------------ Wrong code -----------------------------------




Highcharts.chart('container', {
chart: {
type: 'column',
height: 390,
marginTop:90,
marginBottom:40,
},
exporting:{
enabled: false,
},
title: {
text: '지역별 일별 판매량',
x:0,
y:undefined,
style: {
fontFamily: 'Roboto',
color: '#bec1d1',
fontSize: '0',
height:'0'
}
},
xAxis: {
categories: ['[apple]', '[banana]', '[tomato]', '[orange]', '[strawberry]'],
labels: {
y: -285,
style: {
fontSize: '16px',
fontFamily: 'NotoSansR',
color: '#000'
}
},
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
},
stackLabels: {
enabled: true,
verticalAlign: 'bottom',
crop: false,
overflow: 'none',
y: 25,
formatter: function() {
return this.stack;
},
style: {
fontSize: '13px',
fontFamily: 'dotum',
}
},
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
align: 'right',
x: -10,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#fff',
borderWidth: 1,
shadow: false,
itemStyle: {
color: '#5f6062',

}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
style: {
fontFamily: 'Roboto',
color: 'rgba(0, 0, 0, 0.6)',
fontSize: '15px',
border: '0',
textOutline:'0'
}
}
},
series: {
pointPadding: 0.2,
groupPadding: 0.1,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.5)',
}

},
series: [{
name: '예정량',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(124, 189, 255, 0.2)'],
[1, 'rgba(84, 164, 246, 0.2)']
]
},
data: [183.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
stack: 'A',
}, {
name: '출하량',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(124, 189, 255, 1)'],
[1, 'rgba(84, 164, 246, 1)']
]
},
data: [98.8],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
stack: 'A',
},


{
name: '예정량',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(124, 189, 255, 0.2)'],
[1, 'rgba(84, 164, 246, 0.2)']
]
},
id:'center_side',
data: [200],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
stack: 'B',
}, {
name: '출하량',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(124, 189, 255, 1)'],
[1, 'rgba(84, 164, 246, 1)']
]
},
id:'center_side',
data: [130],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
stack: 'B',
},


{
name: '예정량',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(124, 189, 255, 0.2)'],
[1, 'rgba(84, 164, 246, 0.2)']
]
},
id:'center_side',
data: [120],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
stack: 'C',
}, {
name: '출하량',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(124, 189, 255, 1)'],
[1, 'rgba(84, 164, 246, 1)']
]
},
id:'center_side',
data: [60],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
stack: 'C',
},]
});

[pawelys]

Hello, Thanks for contacting us with your question!
Here is the official highcharts demo, where stacking and grouping is used. https://jsfiddle.net/gh/get/library/pur ... nd-grouped
Let me know, if that works for you, and in case that that you have any specific questions feel free to contact us again! Remember, that the best way of displaying your problem is the jsFiddle demo
Kind regards,

[KIMSAMPYO]

Thank you for your kind response,
There are some misunderstandings, so I ask you again.


I want the graphs to be grouped as shown in the picture.

The apple group has items A, B, and C, and each has two colored bar graph values.

In the banana group
There are items D,E,F, and it is the same as the apple group and has two colored bar graph values.
Those two colored sticks are called inventory and sales.

A, B, C, D, E, and F are separate items, but they have inventory and sales in common.
A, B, C, D, E, and F are regrouped into groups such as apples and bananas.

I'm curious how this complex grouping can be expressed in high charts.

[pawelys]

Hi again! Regarding the grouping, you can group the columns into multiple stacks along with the same x category, by defining the stack's name like in this example: https://jsfiddle.net/BlackLabel/qrx9fgd2/1/
I still don't really understand what the letters A-O stand for, and creating them is a bit tricky. You can use the grouped categories highcharts plugin, which you can get from there: https://blacklabel.github.io/grouped_categories/

The other way of rendering random text on the chart, which I personally prefer, is to render it with SVGRenderer.
Here is the example with the letters: https://jsfiddle.net/BlackLabel/0sjpdtz2/

let me know if that works for you! Kind regards,


Here are some API references, which I used:
https://api.highcharts.com/highcharts/c ... nts.render
https://api.highcharts.com/class-refere ... derer#text

[shenigm2]

Hello, I am also trying to solve the same exact problem. The problem is that I would like to have 1 group label and each bar within that group to have a label. This is a type of chart that is offered in many charting and business intelligence platforms. Could you advise if this is possible and if not are you able to point me to an existing feature request?

As a simple example the group of bars would be a Year and the individual bars within it would be the Months or Quarters of the Year. This way you could visualize a breakdown of Years and Months or Quarters within that year.

Kind Regards,

Stephen

https://www.educba.com/grouped-bar-chart/

[pawelys]

Hello, welcome to the official highcharts forum, and thanks for contacting us with your question!
What you shared can be achieved using the highcharts grouped-categories wrapper: https://blacklabel.github.io/grouped_categories/
Check this link, and let me know, if that works for you! In case of any further questions feel free to contact us again! Kind regards,