CODEWITHSUNDEEP
highcharts
Scott
Scott

Reputation: 782

Highcharts x-axis label automatic grouping

I'm using highcharts to display data for over a period of one month so it it could be displaying anywhere form 1 data point to 31 data points (I'm using the jQuery Datepicker widget to select dates). My problem is with the x-Axis. When viewing between 2 and 7 data points the x-axis is automatically trying to adjust itself which works fine the more data points are being rendered but when there are less as previously mentioned there are problems.

I have captured some screenshots showing my perdicament as well as created a JSFiddle. I do have a specific size that I need to fit the chart in and I have used the same size in the JSfiddle.

What I would like ideally is for the x-axis to start on the first of the month (or at the lest NOT start on the end of the previous month) and avoid overlapping issues. I'm hoping it's a setting that I'm overlooking that controls how highcharts "automatically" calculates what is displayed on the x-axis and it's interval. I know there is a tick-interval setting but I've not had any luck with that in my situation.

Image: https://i.sstatic.net/G7hIp.png

JSFiddle: http://jsfiddle.net/engemasa/sgKcB/

Here is the highcharts code:

 $('.chart').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        labels: {
            enabled: true,
            formatter: function() {
                return Highcharts.dateFormat("%b %e, '%y", this.value);
            }
        }
    },
    title: {
        text: null
    },
    tooltip: {
        formatter: function() {
            var date = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b><br />';
            return date + this.y;
        }
    },
    yAxis: {
        labels: {
            enabled: true
        }
    },
    credits: {
        enabled: false
    }
});

Assistance is greatly appreciated!

Upvotes: 0

Views: 4337

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

Solution seems to be datetime xAxis and dateTimeLabelFormats option for Highcharts. For example: http://jsfiddle.net/sgKcB/26

    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day: "%b %e, '%y",
            week: "%b %e, '%y"
        }
    },

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can use tickPositioner parameter, which allows your own function. You can calculate and return correct order of your ticks.

http://api.highcharts.com/highstock#xAxis.tickPositioner

Upvotes: 0

Related Questions