Skip to content Skip to sidebar Skip to footer

Highcharts Time-based Quarterly Data - Xaxis Label Issue

We are displaying dynamic data on our site. The user can select different types of time periods such as monthly, quarterly, annual, decennial, etc. Our issue comes in trying to sho

Solution 1:

You can set tickInterval as three months

http://jsfiddle.net/yHmrZ/5/

tickInterval:3*30*24*3600*1000,

But when you would like to dynamic change ranges, you should use tickPostitioner

Solution 2:

You can use your own tickPositioner always, take a look: http://jsfiddle.net/yHmrZ/4/

And code for tickPositioner and formatter:

labels: {
            formatter: function () {
                var s = "",
                    d = newDate(this.value),
                    q = Math.floor((d.getMonth() + 3) / 3); //get quarter
                s = "Q" + q + " " + d.getFullYear();
                return s;
            }
        },
        tickPositioner: function(min, max){
            var axis = this.axis,
                act = min,
                ticks = [];
            while( act < max ){
                ticks.push(act);
                act = act + (90 * 24 * 3600 * 1000); //three months
            }
            return ticks;
        },

Post a Comment for "Highcharts Time-based Quarterly Data - Xaxis Label Issue"