gnik1985
Posts: 1
Joined: Tue May 17, 2022 1:10 pm

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

Working with Angular8 and Highcharts

Actual input data

Code: Select all

[
        {
            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.

Code: Select all

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 attached chart

Note: In the attached chart. Y axis labels (date) not working as expected. Also bars not within given date range
Attachments
Screen Shot 2022-05-17 at 1.19.38 AM.png
Screen Shot 2022-05-17 at 1.19.38 AM.png (161.48 KiB) Viewed 353 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

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

Hi gnik1985,

Welcome to our forum and thanks for contacting us with your question!

If I understand correctly, you want to make chart where each point (bar) indicated a date rage. In that case you shouldn't use bar series, especially with stacking option, because basically it adds value of each point to the previous one resulting in this case in completely incorrect dates:
https://jsfiddle.net/BlackLabel/8L0d6wrj/

Instead, most likely you shout either use column range or xrange series:
https://www.highcharts.com/demo/columnrange
https://www.highcharts.com/demo/x-range

Here is a demo showing how could it look like in your case:
https://jsfiddle.net/BlackLabel/2dreacm4/

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”