How to create vertical merged stacked bar in highchart - highcharts

Question

How to create vertical merged stacked bar in highchart.
Group Padding and Point Padding is not working in Highchart.
Expected:
Actual:
https://jsfiddle.net/sathishkumar_v/3woxcskg/
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: null
},
exporting:{
enabled: false
},
legend: {
align: 'right',
},
xAxis: {
categories: [
'6:00AM',
'7:00AM',
'8:00AM',
'9:00AM',
'10:00AM',
'11:00AM',
'12:00AM',
'1:00PM',
'2:00PM',
'3:00PM',
'4:00PM',
'5:00PM',
'6:00PM',
'7:00PM',
'8:00PM',
'9:00PM',
'10:00PM'
],
plotBands: [
{
from: 0,
to: 2,
color: '#D4E2F2'
},
{
from: 2,
to: 5,
color: '#EFC5CA'
},
{
from: 14,
to: 16,
color: '#D4E2F2'
},
{
from: 11,
to: 14,
color: '#EFC5CA'
},
]
},
yAxis: [
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'TRIPS'
}
},
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'DEMAND(PAX)'
},
opposite: true
}
],
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Planned Trips',
yAxis: 1,
data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
color: '#304894',
},
{
name: 'Actual Trips',
///yAxis: 2,
data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
color: '#6FD1F6',
},
{
name: 'Actual Demand',
type: 'column',
stacking: 'normal',
data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80, 100, 75, 60, 75, 40],
color: '#6FD1F6',
pointWidth: 10
}, {
type: 'column',
name: 'Planned Demand',
stacking: 'normal',
data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
color: '#304894',
pointWidth: 10
}]
});
I am using https://github.com/bellstrand/highcharts-border-radius for the border radius top - left and right

Answer 1

You can use a wrapper function to do this, like so:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
console.log(this)
let borderRadius = this.points[0].pointWidth / 2;
this.options.borderRadius = borderRadius;
$.each(this.points, function (i,point) {
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Which takes half of the initial width of the bar as the border radius and covers the gaps they would leave.
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
let borderRadius = this.points[0].pointWidth / 2;
this.options.borderRadius = borderRadius;
$.each(this.points, function (i,point) {
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: null
},
exporting:{
enabled: false
},
legend: {
align: 'right',
},
xAxis: {
categories: [
'6:00AM',
'7:00AM',
'8:00AM',
'9:00AM',
'10:00AM',
'11:00AM',
'12:00AM',
'1:00PM',
'2:00PM',
'3:00PM',
'4:00PM',
'5:00PM',
'6:00PM',
'7:00PM',
'8:00PM',
'9:00PM',
'10:00PM'
],
plotBands: [
{
from: 0,
to: 2,
color: '#D4E2F2'
},
{
from: 2,
to: 5,
color: '#EFC5CA'
},
{
from: 14,
to: 16,
color: '#D4E2F2'
},
{
from: 11,
to: 14,
color: '#EFC5CA'
},
]
},
yAxis: [
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'TRIPS'
}
},
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'DEMAND(PAX)'
},
opposite: true
}
],
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Planned Trips',
yAxis: 1,
data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
color: '#304894',
},
{
name: 'Actual Trips',
///yAxis: 2,
data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
color: '#6FD1F6',
},
{
name: 'Actual Demand',
type: 'column',
stacking: 'normal',
data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80, 100, 75, 60, 75, 40],
color: '#6FD1F6',
pointWidth: 10
}, {
type: 'column',
name: 'Planned Demand',
stacking: 'normal',
data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
color: '#304894',
pointWidth: 10
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Working example: https://jsfiddle.net/ewolden/3woxcskg/19/
If you have several charts in your page but only want this to affect one chart you can set a custom flag for that. You would then need to:
In the chart config:
chart: {
customFlag: 'wrap',
...
},
And in the wrapper:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
console.log(this)
if(this.chart.options.chart.customFlag == 'wrap') {
let borderRadius = this.points[0].pointWidth / 2;
this.options.borderRadius = borderRadius;
$.each(this.points, function (i,point) {
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
});
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
console.log(this)
if(this.chart.options.chart.customFlag == 'wrap') {
let borderRadius = this.points[0].pointWidth / 2;
this.options.borderRadius = borderRadius;
$.each(this.points, function (i,point) {
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
});
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
type: 'spline',
customFlag: 'wrap'
},
title: {
text: null
},
exporting:{
enabled: false
},
legend: {
align: 'right',
},
xAxis: {
categories: [
'6:00AM',
'7:00AM',
'8:00AM',
'9:00AM',
'10:00AM',
'11:00AM',
'12:00AM',
'1:00PM',
'2:00PM',
'3:00PM',
'4:00PM',
'5:00PM',
'6:00PM',
'7:00PM',
'8:00PM',
'9:00PM',
'10:00PM'
],
plotBands: [
{
from: 0,
to: 2,
color: '#D4E2F2'
},
{
from: 2,
to: 5,
color: '#EFC5CA'
},
{
from: 14,
to: 16,
color: '#D4E2F2'
},
{
from: 11,
to: 14,
color: '#EFC5CA'
},
]
},
yAxis: [
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'TRIPS'
}
},
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'DEMAND(PAX)'
},
opposite: true
}
],
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Planned Trips',
yAxis: 1,
data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
color: '#304894',
},
{
name: 'Actual Trips',
///yAxis: 2,
data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
color: '#6FD1F6',
},
{
name: 'Actual Demand',
type: 'column',
stacking: 'normal',
data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80, 100, 75, 60, 75, 40],
color: '#6FD1F6',
pointWidth: 10
}, {
type: 'column',
name: 'Planned Demand',
stacking: 'normal',
data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
color: '#304894',
pointWidth: 10
}]
});
Highcharts.chart('container2', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Working example: https://jsfiddle.net/ewolden/3woxcskg/24/