shameed
Posts: 3
Joined: Sun Dec 19, 2021 1:40 pm

Multiple series for grouped x-Axis categories

Dear Team,
I want to show multiple series for grouped x-Axis categories. In y-Axis total calls has to be classified into 3 series(virtual, phone, field). I done grouping of multiple xAxis categories, but facing problem in showing series. Note currently added series values as data arrays inside data array. Let me know how to do it or pass values for series.

The data shown in image below for customers/Quaters series has to be bifurcated into 3 series (phone,virtual,field)

$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column",
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
backgroundColor: '#f7f7f7'
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Grouped Categories with 3 Series<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
},
yAxis: {
"title": {
"text": "Call Interactions"
},
"labels": {
"style": {
"color": "#000",
"fontWeight": "bold"
},
"enabled": true,
"verticalAlign": "top"
}
},
"plotOptions": {
"column": {
"grouping": true,
"pointPadding": 0.2,
"groupPadding": 0.1,
"borderWidth": 0,
"dataLabels": {
"enabled": true,
"rotation": -90,
"crop": false,
"overflow": "none",
"y": -20,
"maxPadding": 0.1,
"inside": true
}
}
}
,
series: [
{
"name": "Field",
"data": [
{
"name": "Customer1",
"data": [
{
"name": "Q1-2021",
"y": 187,
"stack" : "Customer1"
},
{
"name": "Q2-2021",
"y": 211,
"stack" : "Customer1"
},
{
"name": "Q3-2021",
"y": 192,
"stack" : "Customer1"
},
{
"name": "Q4-2021",
"y": 129,
"stack" : "Customer1"
}
],
"pointPadding": 0.2
},
{
"name": "Customer2",
"data": [
{
"name": "Q4-2019",
"y": 155,
"stack" : "Customer2"
},
{
"name": "Q4-2021",
"y": 299,
"stack" : "Customer2"
}
],
"pointPadding": 0.2
},
{
"name": "Customer3",
"data": [
{
"name": "Q3-2021",
"y": 967,
"stack" : "Customer3"
},
{
"name": "Q4-2021",
"y": 69,
"stack" : "Customer3"
}
],
"pointPadding": 0.2
},
{
"name": "Customer4",
"data": [
{
"name": "Q4-2020",
"y": 122,
"stack" : "Customer4"
},
{
"name": "Q4-2021",
"y": 342,
"stack" : "Customer4"
}
],
"pointPadding": 0.2
}
],
"pointPadding": 0.2
},
{
"name": "Phone",
"data": [
{
"name": "Customer1",
"data": [
{
"name": "Q1-2021",
"y": 133,
"stack" : "Customer1"
},
{
"name": "Q2-2021",
"y": 206,
"stack" : "Customer1"
},
{
"name": "Q3-2021",
"y": 319,
"stack" : "Customer1"
},
{
"name": "Q4-2021",
"y": 2891,
"stack" : "Customer1"
}
],
"pointPadding": 0.2
},
{
"name": "Customer2",
"data": [
{
"name": "Q4-2019",
"y": 543
},
{
"name": "Q4-2021",
"y": 121
}
],
"pointPadding": 0.2
},
{
"name": "Customer3",
"data": [
{
"name": "Q3-2021",
"y": null
},
{
"name": "Q4-2021",
"y": null
}
],
"pointPadding": 0.2
},
{
"name": "Customer4",
"data": [
{
"name": "Q4-2020",
"y": 337
},
{
"name": "Q4-2021",
"y": 355
}
],
"pointPadding": 0.2
}
],
"pointPadding": 0.2
},
{
"name": "Virtual",
"data": [
{
"name": "Customer1",
"data": [
{
"name": "Q1-2021",
"y": null
},
{
"name": "Q2-2021",
"y": null
},
{
"name": "Q3-2021",
"y": null
},
{
"name": "Q4-2021",
"y": null
}
],
"pointPadding": 0.2
},
{
"name": "Customer2",
"data": [
{
"name": "Q4-2019",
"y": null,
"stack" : "Customer2"
},
{
"name": "Q4-2021",
"y": 48,
"stack" : "Customer2"
}
],
"pointPadding": 0.2
},
{
"name": "Customer3",
"data": [
{
"name": "Q3-2021",
"y": 4432,
"stack" : "Customer3"
},
{
"name": "Q4-2021",
"y": 6,
"stack" : "Customer3"
}
],
"pointPadding": 0.2
},
{
"name": "Customer4",
"data": [
{
"name": "Q4-2020",
"y": 13,
"stack" : "Customer4"
},
{
"name": "Q4-2021",
"y": 18,
"stack" : "Customer4"
}
],
"pointPadding": 0.2
}
],
"pointPadding": 0.2
}
],
xAxis: {
"categories": [
{
"categories": [
{
"categories": [
"Q1-2021",
"Q2-2021",
"Q3-2021",
"Q4-2021"
],
"title": {
"text": "Customer1"
},
"name": "Customer1"
},
{
"categories": [
"Q4-2019",
"Q4-2021"
],
"title": {
"text": "Customer2"
},
"name": "Customer2"
},
{
"categories": [
"Q3-2021",
"Q4-2021"
],
"title": {
"text": "Customer3"
},
"name": "Customer3"
},
{
"categories": [
"Q4-2020",
"Q4-2021"
],
"title": {
"text": "Customer4"
},
"name": "Customer4"
}
],
"title": {
"text": "Customer Name"
},
"name": "Customer Name"
}
],
"labels": {
"groupedOptions": [
{
"style": {
"color": "red"
},
"rotation": 0
},
{
"style": {
"color": "blue"
},
"rotation": 0,
"align": "center"
},
{
"style": {
"fontWeight": "bold",
"color": "#0005AA"
},
"rotation": 0
}
],
"rotation": -90,
"enableTrimming": false
}
}
});
});
Attachments
HCForumMultiSeries.png
HCForumMultiSeries.png (12.27 KiB) Viewed 2298 times
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Multiple series for grouped x-Axis categories

Hi,

Welcome to our forum and thanks for contacting us with your question!

Could you reproduce the issue in an online editor that I could work on? Because I have a problem with recreating the graph based on what you sent.

You can start with this demo: https://jsfiddle.net/BlackLabel/0pbeym97/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
shameed
Posts: 3
Joined: Sun Dec 19, 2021 1:40 pm

Re: Multiple series for grouped x-Axis categories

Hi Michal,
Sorry for late reply. This was fixed. I am new to highcharts and for grouping categories, i created categories inside categories, i thought same for series as well, which was the problem. Fixed it by mapping series to 0th level of grouped x-Axis categories. only problem I am facing now is auto spacing/overriding of x-axis space. Please find the attached file. groupedXAxisProblem.PNG
Attachments
groupedXAxisProblem.PNG
groupedXAxisProblem.PNG (19.08 KiB) Viewed 2239 times
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Multiple series for grouped x-Axis categories

Hello,

I don't quite understand. Could you say what you would like to achieve?
Sending a demo would also make it easier for me to help you.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”