How to use HighStock's tickPositioner to set tick at end of month?

Question

This highcharts admin response explains this is not natively possible:

There's no option for using the last date of the month, but you can create your own tickPositioner callback

I've followed the advice, however nothing seems to change regardless of the tickPositioner function! I've created an isolated demo of the issue here. [It's just this example with the tick positioner added.]

In the jsFiddle example you can see my tickPositioner below. I subtract one day (60*60*24*1000) 15 times (*15). Fifteen is random just to show there's not affect.

        xAxis:{
            //LOOK HERE!
            tickPositioner:function(){
                return _.forEach(this.tickPositions, function(date){                         
                    console.log('date',date, new Date(date), new Date(date - 60*60*24*1000*15));
                    //return date;   //uncomment to show orginal dates                     
                    return (date - 60*60*24*1000*15);
                });
            //LOOK HERE!
            }
        },

Extra notes:

I can tell the tickpositioner is doing something because I can:

remove the ticks altogether if the function is setup incorrectly
oddly format the the dates if the dates are incorrect
not change the date ticks at all if everything is correctly set up.

I suspect there is something going on with the formatting of the dates and minimum tick intervals. In the official highcharts example for tickpositioner there I can see it working, but if you decrease the custom increment they setup you can see a similar issue where there's no affect on the tick positions.

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

First and foremost I believe your problem is with the use of forEach of lodash. It doesn't return what you think it returns. From the documentation:

_.forEach(collection, [iteratee=_.identity], [thisArg])
...

Returns

(Array|Object|string): Returns collection.

With that being said, here's an attempt at your overall issue with ticks at the end of each month:

$('#container').highcharts('StockChart', {
    xAxis:{
        tickPositioner:function(min, max){
            var result = [];
            var current = min;
            
            while(current < max) {
                var date = new Date(current);
                var lastDate = new Date(date.getFullYear(), 
                                        date.getMonth() + 1, 
                                        0, 
                                        0, 
                                        -date.getTimezoneOffset());
                var nextDate = new Date(date.getFullYear(), 
                                        date.getMonth() + 1, 
                                        1, 
                                        0, 
                                        -date.getTimezoneOffset());
                
                result.push(lastDate.getTime());
                current = nextDate.getTime();
            }
            
            result.info = this.tickPositions.info;
            return result;
        }
    },
    // ...
});

See this JSFiddle demonstration of how it looks. Code probably has room for improvement.

How to use HighStock's tickPositioner to set tick at end of month?

1 Answers1