Saravana
Saravana

Reputation: 531

format Xaxis timedate in highcharts

how to format xAxis timedata as shown in the picture. what i have tried is :

xAxis: {
        allowDecimals: false,
        type: "datetime",
        categories: [Date.UTC(2013, 0, 7),Date.UTC(2013, 0, 9),Date.UTC(2014, 0, 3),Date.UTC(2015, 0, 5),Date.UTC(2016, 0, 7)],
        labels: {
            //format: '{value: %A, </b> %y </b> %B}',
            formatter: function () {
                var dayStr = Highcharts.dateFormat('%A', this.value);
                var monthstr = Highcharts.dateFormat('%B', this.value);
                var yearstr = Highcharts.dateFormat('%y', this.value);
                var finaldate = '<div>' + dayStr + '</div></br><div>' + yearstr + monthstr + '</div>'
                return finaldate;       // clean, unformatted number for year
            }
        }
    },

Expected output : enter image description here

thanks in advance!!

Upvotes: 1

Views: 39

Answers (1)

Saravana
Saravana

Reputation: 531

i fixed it by adding useHTML

useHTML: true,
            //format: '{value: %A, </b> %y </b> %B}',
            formatter: function () {
                var dayStr = Highcharts.dateFormat('%A', this.value);
                var monthstr = Highcharts.dateFormat('%B', this.value);
                var yearstr = Highcharts.dateFormat('%y', this.value);
                var finaldate = '<div>' + dayStr + '</div><div>' + yearstr + ' ' + monthstr + '</div>'
                return finaldate;       // clean, unformatted number for year
            }

Upvotes: 1

Related Questions