CODEWITHSUNDEEP
highcharts
no1uknow
no1uknow

Reputation: 549

Highcharts datetime column bars are not lining up correct

First, for some reason I can't seem to get the yAxis to tickInterval on the 1st and 15th of each month.

Second, none of the data is correct. If you check out the series data and where the bars are on the graph there is some kind of monthly padding going on. Even the tooltip has the wrong dates.

ref: http://jsfiddle.net/no1uknow/5hnBP/12/

yAxis: {
            title: '',
            type: 'datetime',
            min: Date.UTC(2014, 9, 1),
            max: Date.UTC(2014, 12, 31),
            tickInterval: 1000 * 60 * 60 * 24 * 14, // two weeks
            //ticks: ['2014-10-01','2014-10-15','2014-11-01','2014-11-15','2014-12-01','2014-12-15','2015-01-01'],
            labels: {
                formatter: function() {
                    return Highcharts.dateFormat('%d-%b-%Y', this.value);
                }
            }
        }

Upvotes: 0

Views: 151

Answers (2)

no1uknow
no1uknow

Reputation: 549

Thank jlbriggs you got me going the right direction.

If anyone is interested here is the solution I needed.

http://jsfiddle.net/5hnBP/15/

    yAxis: {
                title: '',
                type: 'datetime',
                min: 1409544000000, // Date.UTC(2014, 9, 1),
                max: 1418619600000, // Date.UTC(2014, 1, 31),
              tickPositions: 
[1409544000000,1410753600000,1412136000000,1413345600000,1414814400000,1416027600000,1417410000000,1418619600000,1420088400000],
                labels: {
                    format: '{value:%d-%b-%Y}'
                  }


            }

Upvotes: 0

jlbriggs
jlbriggs

Reputation: 17791

1) There is no one interval that will give you the 1st and 15th of every month, as the months are all different lengths, and the distance from 1->15 and that from 15->1 are not the same.

In order to have ticks at those specific dates, you will need to use the tickPositions setting, and provide an array with the epoch time stamp (in millisecods) of each date at which you want a tick (or the Date.UTC object).

2) The bars and tooltips are displaying exactly correctly. Remember that in javascript, months start at 0 - so 10 is November, not October.

Upvotes: 4

Related Questions