Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

highcharts datetime x-axis custom formatting

I would like to have just the first letter of each weekday as the x-axis, ie M T W T F S S repeated. Currently you can set dateTimeLabelFormats, which I've set to use %a, which is the dateFormat for short weekday (Mon Tues Wed etc). How can I just use the first letter?

Here's my code (I'm using Lazy Highcharts in rails)

 f.xAxis({type: 'datetime', tickInterval: 24*3600*1000, dateTimeLabelFormats: {
        day: '%a',
        week: '%a'}
        })

Thanks.

like image 673
butterywombat Avatar asked Oct 14 '11 02:10

butterywombat


1 Answers

In the label -> formatter for xAxis, use dateFormat function to get the month and then use the substring function to get the first letter and return that letter as follows -

xAxis: {        
    type: 'datetime',
    labels: {
        formatter: function() {
            var monthStr = Highcharts.dateFormat('%b', this.value);
            var firstLetter = monthStr.substring(0, 1);
            return firstLetter;
        }
    }
},

See it on jsfiddle

like image 121
Bhesh Gurung Avatar answered Sep 21 '22 04:09

Bhesh Gurung