align the plot in center of the grid in highchart

Question

i am trying to align the plot on the x-axis grid.right now i have given alternative color for xAxis as you can see in the visual below,

but i am not able to align blue plot bar vertically middle, please have a look at the below code and visual and let me know if there is any solution for it,

below is my code,

function aoassortmentschart() {
$(function () {

    $('#ao-assortments-container').highcharts({
        chart: {
            type: 'column',
            inverted: true,
            verticalAlign: "center"
        },
        credits: { enabled: false },
        title: null,
        subtitle: null,

        xAxis: {
            alternateGridColor: '#F7F7F7',
            gridColor: "#000",
            offset: 120,
            categories : ["Cluster 1", "Cluster 2", "Cluster 3", "Cluster 4", "Cluster 5"],
            tickWidth: 0,
            lineWidth:0,
            min: 0,
            max: 4,
            labels: {
                enabled: true,
                useHTML: true,
                x : 100,
                formatter: function () {
                    return '<div><input type="radio" class="ao-assortment-radio" style="margin-right: 10px" size="10" name="assortmentClusterValue"/><span style="margin-left: 10px ;width: 100px; background: #5867C2; padding: 10px 5px; color : #fff; text-align : center">' + this.value + '</span></div>'
                }
            }
        },
        yAxis: {
            min: 0,
            max: 250,
            pointInterval: 50,
            title: {
                useHTML : true,
                formatter: function(){
                    return '<div class="ao-assortment-title"><span class="shape" style="width: 40px;height:40px;bacground:green">&nbsp;</span>Sales</div>'
                }
            }

        },
        legend : {
            enabled: false,
        },
        plotOptions: {                
            series: {

                    pointWidth: 31,
                    allowPointSelect: false,
                    marginLeft: 50,
                    dataLabels: {
                        align: 'center',
                        enabled: true,
                        useHTML: true,
                        x:-30,
                        formatter: function () {
                            return "$ " + this.y
                        },
                        style : {
                            fontWeight: "normal",
                            textAlign: "center",
                            color: "#fff",

                        }

                    }
                }

        },
        series: [
            {
                name : "Cluster 1",
                data: [200, null, null, null, null],
                color: "#60B3D1"
            },
            {
                name: "Cluster 2",
                data: [null, 120, null, null, null],
                color: "#60B3D1"
            },

            {
                name: "Cluster 3",
                data: [null, null, 240, null, null],
                color: "#60B3D1"
            },

            {
                name: "Cluster 4",
                data: [null, null,null ,170 , null],
                color: "#60B3D1"
            },

            {
                name: "Cluster 5",
                data: [null, null,null ,null ,100 ],
                color: "#60B3D1"
            }
        ]
    });
    // the button action

});

}

as shown in the image below, i want the blue bar to be vertically aligned middle of the grid.

Answer 1

What you describe is the default behavior.

The placement is being affected by having a series for each data point - the chart is making some amount of space for the null points that you have inserted.

If you put your data in a single series, the problem goes away.

series: [
  {
    name: "Clusters",
    data: [200, 120, 240, 170, 100],
    color: "#60B3D1"
  }
]

Example:

• http://jsfiddle.net/jlbriggs/3d3fuhbb/138/