Как создать bar чарты со scatter в react-highcharts?

Использую данную библиотеку чартов, со stacked-bar чартами проблем небыло - подкидываю в рендер компоненту:

<ReactHighcharts config={config}></ReactHighcharts>

Этот тип чартов создается 1 конфигом в их примере в оф документации(т.е. прокидывается 1 конфиг в контейнер, в конфиге серии с данными).

Пявилась задача сделать этот тип чартов и возник вопрос. Тут получается,что конфиг в обычном Highcharts как бы разделяется. Как это реализовать в реакте? Я попробовал следующее:

{
        colors: ['#0055c1', '#3276cd', '#4c88d3', '#6699d9', '#99bbe6','#ccddf2'],
        chart: {
            type: 'bar',
            margin:[30,15,10,100],
        },
        title: {
            style: {
                color: '#000',
                font: '18px "graphik-regular","Helvetica Neue",Helvetica,Arial,sans-serif'
            },
            text: title
        },
        subtitle: {
            style: {
                color: '#ddd',
                font: '14px "graphik-regular","Helvetica Neue",Helvetica,Arial,sans-serif'
            }
        },
        xAxis: {
            categories: categories,
            // tickWidth: 0,
            labels: {
                style: {
                    width: 100
                }
            },
            // lineColor: "#F3F3F3",
            gridLineWidth: 1,
            gridLineColor: "#F3F3F3",
            lineColor: "#F3F3F3",
            minorGridLineColor: "#F3F3F3",
            tickColor: "#F3F3F3",
            tickWidth: 1
        },
        yAxis:{
            min:0,
            max:10,
            title:false,
            minPadding:0,
            maxPadding:0,
            tickColor:'#ccc',
            tickWidth:1,
            tickLength:3,
            gridLineWidth:0,
            endOnTick:true,
            labels:{
                y:10,
                style:{
                    fontSize:'8px'
                },
                format: '{value}',
            },
        },
        credits: {
            enabled: false
        },
        legend:{enabled:false},
        tooltip: {
            enabled:true,
            backgroundColor:'rgba(0, 0, 0, .85)',
            shadow:false,
            borderWidth: 0,
            style:{
                fontSize:'10px',
                padding:2,
                color: '#fff'
            },
            formatter:function() {
                return this.series.name + ": <strong>" + this.y + "</strong>";
            }
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
            },
            bar:{
                color:'#ddd',
                shadow:false,
                borderWidth:0,
                className: "tema-averageBar"
            },
            scatter:{
                color: '#000',
                marker:{
                    symbol:'line',
                    lineWidth:4,
                    radius:14,
                    lineColor:'#000'
                }
            }
        },
        series: series,
        exporting: {
            enabled: true,
            sourceWidth: 800,
            sourceHeight: 400,
            chartOptions: {
                subtitle: null,
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        cursor: 'pointer',
                        dataLabels:{
                            enabled:true,
                            formatter:function() {
                                console.log('FORM', this)
                                return this.y > 0 ?  this.y : '';
                            }
                        }
                    }
                },
            }
        }
    };

Series я заполняю по примеру stacked chart. ПОлучилось криво(

Судя по всему такой способ в данном случае не очень подходит, или же есть параметр,которым можно отрегулировать положение баров. Может кто-то сталкивался с этим. Как лучше прописать конфиг?