How can I draw Highcharts horizontal stacked bar with date-time duration

Question

Working with Angular8 and Highcharts

Actual input data

[
        {
            name: 'Bar 1',
            open: [{from: 1649307600000, to: 1649307600000}],
            inprogress: [],
            done: [{from: 1649868600000, to: 1650085200000}],
        },
        {
            name: 'Bar 2',
            open: [{from: 1649307600000, to: 1649868600000}],
            inprogress: [],
            done: [{from: 1649868600000, to: 1650085200000}],
        },
        {
            name: 'Bar 3',
            open: [{from: 1649307600000, to: 1649868600000}],
            inprogress: [],
            done: [{from: 1649868600000, to: 1650085200000}],
        },
        {
            name: 'Bar 4',
            open: [
                {from: 1649307600000, to: 1649307600000},
                {from: 1649785500000, to: 1649867100000},
            ],
            inprogress: [
                {from: 1649782800000, to: 1649783100000},
                {from: 1649783400000, to: 1649783700000},
                {from: 1649867100000, to: 1649867400000},
            ],
            done: [
                {from: 1649783100000, to: 1649783400000},
                {from: 1649783700000, to: 1649785500000},
                {from: 1649867400000, to: 1650085200000},
            ],
        },
        {
            name: 'Bar 5',
            open: [],
            inprogress: [],
            done: [{from: 1649307600000, to: 1650085200000}],
        },
        {
            name: 'Bar 6',
            open: [],
            inprogress: [],
            done: [{from: 1649307600000, to: 1650085200000}],
        },
        {
            name: 'Bar 7',
            open: [],
            inprogress: [],
            done: [{from: 1649307600000, to: 1650085200000}],
        },
        {
            name: 'Bar 8',
            open: [
                {from: 1649433300000, to: 1649435100000},
                {from: 1649439000000, to: 1649439300000},
            ],
            inprogress: [
                {from: 1649433000000, to: 1649433300000},
                {from: 1649435100000, to: 1649435400000},
                {from: 1649439300000, to: 1649439600000},
            ],
            done: [
                {from: 1649307600000, to: 1649433000000},
                {from: 1649435400000, to: 1649439000000},
                {from: 1649439600000, to: 1650085200000},
            ],
        },
        {
            name: 'Bar 9',
            open: [],
            inprogress: [],
            done: [{from: 1649307600000, to: 1650085200000}],
        },
    ]

I want to draw the labels as Date (form the given date range based on the data values).

Looking for the bars in date range Open/In progress/Done based on the from and to from the data.

Highcharts.chart({
chart: {
    type: 'bar',
    renderTo: 'container',
},
title: {
    text: 'Horizontal stacked bar',
},
xAxis: {
    categories: ['Bar 1', 'Bar 2', 'Bar 3', 'Bar 4', 'Bar 5', 'Bar 6', 'Bar 7', 'Bar 8', 'Bar 9'],
},
yAxis: {
    min: //min of date value from data,
    max: //max of date value from data,
    type: 'datetime',
    labels: {
        overflow: 'justify',
        formatter: function() {
            console.log(this.value);

            const dd = new Date(Number(this.value) + min value);

            return `${dd.getDate()}-${dd.getMonth() + 1}-${dd.getFullYear()}`;
        },
    },
   
},
tooltip: {
    formatter: function() {
        return this.series.name;
    },
},
plotOptions: {
    series: {
        stacking: 'normal',
    },
},
series: [
    {
        name: 'Open',
        type: 'bar',
        data: [
            1649307600000,
            1649868600000,
            1649868600000,
            1649307600000,
            1650085200000,
            1650085200000,
            1650085200000,
            1649435100000,
            1650085200000,
        ],
        color: 'red',
    },
    {
        name: 'In Progress',
        type: 'bar',
        data: [
            1649307600000,
            1649868600000,
            1649868600000,
            1649783100000,
            1650085200000,
            1650085200000,
            1650085200000,
            1649433300000,
            1650085200000,
        ],
        color: 'yellow',
    },
    {
        name: 'Done',
        type: 'bar',
        data: [
            1650085200000,
            1650085200000,
            1650085200000,
            1649783400000,
            1650085200000,
            1650085200000,
            1650085200000,
            1649433000000,
            1650085200000,
        ],
        color: 'green',
    },

    {
        name: 'Open',
        type: 'bar',
        data: [0, 0, 0, 1649867100000, 0, 0, 0, 1649439300000, 0],
        color: 'red',
        showInLegend: false,
    },

    {
        name: 'In Progress',
        type: 'bar',
        data: [0, 0, 0, 1649783700000, 0, 0, 0, 1649435400000, 0],
        color: 'yellow',
        showInLegend: false,
    },
    {
        name: 'In Progress',
        type: 'bar',
        data: [0, 0, 0, 1649867400000, 0, 0, 0, 1649439600000, 0],
        color: 'yellow',
        showInLegend: false,
    },

    {
        name: 'Done',
        type: 'bar',
        data: [0, 0, 0, 1649785500000, 0, 0, 0, 1649439000000, 0],
        color: 'green',
        showInLegend: false,
    },
    {
        name: 'Done',
        type: 'bar',
        data: [0, 0, 0, 1650085200000, 0, 0, 0, 1650085200000, 0],
        color: 'green',
        showInLegend: false,
    },
],
});

With the above code getting the below chart

Note: In above chart. Y axis labels (date) not working as expected. Also bars not within given date range

Answer 1

I would suggest to instead of a stacked bar series, use xrange (https://www.highcharts.com/demo/x-range) series type.

As you can see in this example: http://jsfiddle.net/BlackLabel/x67rbnoh - timestamps are stacked, so you would have to calculate the y value based on the previous one.