Combined Chart Highcharts Pie plus Bar grouppadding and pointapadding issue - highcharts

Question

I am trying to have combined chart to display bar charts below my 2 pie series .
I am trying to push the 3 bars below "Chart Title" and I am not being to achieve this with different parameters like grouppadding in highcharts . First I need to reduce the space between Bars to make it 10 px may be and then need to push the entire bar series after Semidonut Pie .
Anyway to achieve this ...
This is roughly the coding I have :
<HighchartWrapper
chartOptions={{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotBackgroundColor: null,
plotShadow: false,
height: 400,
width: 650,
},
tooltip: {
formatter: function () {
console.log('In tooltip:', this);
if (this.key === 'yoyfnbrev')
var txt1 = 'YOY Func Rev' + this.y;
return txt1;
},
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '85%'],
size: '160%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: '16px',
color: 'black',
style: {
fontFamily: "'Lato', sans-serif",
},
},
formatter: function () {
if (this.series.name === 'revthisyear')
return (
this.point.y.toFixed(0) + '%'
);
else if (this.series.name === 'revlastyear')
return this.point.y.toFixed(0) + '%';
},
},
},
},
bar: {
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
},
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
opposite: true,
title: {
text: null,
},
labels: {
enabled: false,
},
},
series: [
{
type: 'pie',
name: 'revlastyear',
innerSize: '40%',
data: [20,40,40],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: true,
distance: -140,
},
},
{
type: 'pie',
name: 'revthisyear',
innerSize: '60%',
data: [[10, 70, 20],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: false,
distance: -60,
},
},
{
type: 'bar',
name: 'yoyrev',
// innerSize: '10%',
data: [20, -100, -50],
colors: ['#1a7ead', '#e95326', '#008540'],
pointWidth: 10,
pointPadding: 0,
groupPadding: 0.3,
},
],
}}
/>

Answer 1

I think that a good solution will be to use independent yAxis and xAxis for this bar, set a smaller height for them and change the pie centre values. See:
xAxis: [{
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
}, {
height: '20%'
}],
Demo: https://jsfiddle.net/BlackLabel/jc3fLvt1/1/
API: https://api.highcharts.com/highcharts/series.pie.center
API: https://api.highcharts.com/highcharts/series.bar.yAxis

Answer 2

The simplest solution is to create another chart:
Highcharts.chart('container', {
...,
series: [{
type: 'pie',
...
}]
});
Highcharts.chart('container2', {
...,
series: [{
type: 'bar',
...
}]
});
Live demo: http://jsfiddle.net/BlackLabel/r9yz6qdk/