High chart stack column date time issue

Question

here is my code tooltip gives correct values but graph is not correct

Highcharts.chart('container5', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sleep Graph'
    },
    xAxis: {
        categories: ['Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', ]
    },
    yAxis: {
            title: {
                text: 'Data-Time'
            },
            type: 'datetime',
            dateTimeLabelFormats: {
              minute: '%H:%M:%S',
              hour: '%H:%M:%S',
              day: '%H:%M:%S',
              week: '%H:%M:%S',
              month: '%H:%M:%S',
              year: '%H:%M:%S'             
            },            
            // labels: {
            //   format: '{value:%Y-%b-%e}'
            // },
            min : Date.UTC(2017,0,1,18,0),
        },
    tooltip: {
        formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                Highcharts.dateFormat('%H:%M:%S', this.y) +': '+ this.x;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'Awake',
        data: [Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,08,00), ],  
    }, {
        name: 'Sleep',
        data: [Date.UTC(2017,0,2,08,20), Date.UTC(2017,0,2,08,20), Date.UTC(2017,0,2,06,15), Date.UTC(2017,0,2,06,15), Date.UTC(2017,0,2,08,25), Date.UTC(2017,0,2,08,10), Date.UTC(2017,0,2,06,35), ],
    }, {
        name: 'Bed Time',
        data: [Date.UTC(2017,0,1,21,00), Date.UTC(2017,0,1,20,00), Date.UTC(2017,0,1,22,00), Date.UTC(2017,0,1,19,00), Date.UTC(2017,0,1,20,00), Date.UTC(2017,0,1,22,00), Date.UTC(2017,0,1,21,00), ],
    }    
    ]
});

Please take the time to format your code properly in the question. It's an unreadable mess at the moment, so no one will be able to help you — Rory McCrossan, Oct 23 '17 at 09:36
you have something wrong here `dateTimeLabelFormats: { minute: '%H:%M:%S', hour: '%H:%M:%S', day: '%H:%M:%S', week: '%H:%M:%S', month: '%H:%M:%S', year: '%H:%M:%S' },` — Temani Afif, Oct 23 '17 at 09:38
check this : https://stackoverflow.com/questions/7101464/how-to-get-highcharts-dates-in-the-x-axis — Temani Afif, Oct 23 '17 at 09:40
if i user only one series it gives correct graph but when i use 3 series this happens, can anyone tell me a exact solution please. — Muhammad Rohail, Oct 23 '17 at 09:53

score 0 · Answer 1 · answered Oct 23 '17 at 10:42

You should mention pointStart and point Interval There is some thing wrong here

data: [Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,08,00), ],

This example might help you. http://jsfiddle.net/gh/get/jquery/2/highcharts/highcharts/tree/master/samples/highcharts/xaxis/datetimelabelformats/

score 0 · Answer 2 · answered Oct 24 '17 at 11:17

Your values are timestamps (number of miliseconds from 01.01.1970 00:00 UTC). Highcharts stacking mechanism makes a sum from all the points that have the same x value - so in this case it adds timestamps. That's why when you comment out dateTimeLabelFormats code section you'll get values like 2060 on your y axis.

This code:

var d1 = Date.UTC(2017, 0, 1),
  d2 = Date.UTC(2017, 0, 2),
  format = '%Y.%m.%d %H:%M  ';
console.log(Highcharts.dateFormat(format, d1), Highcharts.dateFormat(format, d2), Highcharts.dateFormat(format, d1 + d2));

Outputs:

2017.01.01 00:00   2017.01.02 00:00   2064.01.03 00:00

type: 'datetime' is just an information for Highcharts how to format labels - all computing is performed on timestamps (which are 'regular' integer numbers).

Possible solution

You can disable grouping instead of using stacking:

  plotOptions: {
    column: {
      //stacking: 'normal',
      grouping: false
    }
  }

Live working example: http://jsfiddle.net/kkulig/7xkt2p0e/

API reference: https://api.highcharts.com/highcharts/plotOptions.column.grouping

High chart stack column date time issue

2 Answers2