score:1

That is no problem at all, only issue is columns being offcenter due to empty values in one series. (We need two series for legends) It can be solved adding offset values to xAxis.

let rawData = [
    {
        month: 1,
        costOfRepair: 200,
        lessThanLastYear: true
    },
    {
        month: 2,
        costOfRepair: 300,
        lessThanLastYear: true
    },
    {
        month: 3,
        costOfRepair: 3800,
        lessThanLastYear: false
    },
    {
        month: 4,
        costOfRepair: 2000,
        lessThanLastYear: true
    },
    {
        month: 5,
        costOfRepair: 4000,
        lessThanLastYear: false
    },
    {
        month: 6,
        costOfRepair: 2500,
        lessThanLastYear: false
    },
    {
        month: 7,
        costOfRepair: 100,
        lessThanLastYear: false
    },
    {
        month: 8,
        costOfRepair: 4500,
        lessThanLastYear: false
    },
    {
        month: 9,
        costOfRepair: 4000,
        lessThanLastYear: false
    },
    {
        month: 10,
        costOfRepair: 2000,
        lessThanLastYear: false
    },
    {
        month: 11,
        costOfRepair: 5800,
        lessThanLastYear: false
    },
    {
        month: 12,
        costOfRepair: 2500,
        lessThanLastYear: false
    },
]

function processRawData(lessThanLastYear) {
    let data = []

    rawData.forEach(dataPoint => {
        if(dataPoint.lessThanLastYear === lessThanLastYear){
            data.push({
                x: dataPoint.lessThanLastYear === true ? dataPoint.month + 0.15 : dataPoint.month - 0.15,
                y: dataPoint.costOfRepair,
            })
        }

    })

    return data
}

Highcharts.chart('container', {
    series: [
        {
            name: 'Cost (>= Previous Year)',
            type: 'column',
            color: 'red',
            data: processRawData(true)
        },
        {
            name: 'Cost (<= Previous Year)',
            type: 'column',
            color: 'green',
            data: processRawData(false)
        }
    ]
})
<script src="https://code.highcharts.com/highcharts.js"></script>

    <div id="container"></div>


Related Articles