Combined Chart Highcharts Pie plus Bar grouppadding and pointapadding issue

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/