CODEWITHSUNDEEP
javascriptjqueryhighcharts
PStokes
PStokes

Reputation: 138

Highchart xAxis tick not starting at first data point

I'm having an issue where I wan't the x-axis to start at December 31st and not January 1st. I tried setting the x-axis min and using dateTimeLabelFormats, but nothing seems to change the date the ticks start at. 

xAxis: {
        type: 'datetime',
        labels: {
            rotation: 300,
            //formatter: function () {
            //return this.value;
            //}
        },
        dateTimeLabelFormats: {
            year: '%m/%d/%Y'
        },
        //minTickInterval: 365 * 24 * 3600 * 1000,
        min: Date.UTC(2004, 11, 31)

    },

I put my code in a jsFiddle.

Upvotes: 0

Views: 2027

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

The best way is to use tickPositioner, for example this way: http://jsfiddle.net/t3nr0kgt/2/

        tickPositioner: function (min, max) {
            var axis = this,
                options = axis.options,
                // get normalized tick interval
                normalizedTickInterval = axis.normalizeTimeTickInterval(
                    axis.tickInterval, 
                    options.units
                ),
                // get default ticks
                ticks = axis.getTimeTicks(
                    normalizedTickInterval, 
                    min, 
                    max, 
                    options.startOfWeek,
                    axis.ordinalPositions,
                    axis.closestPointRange,
                    true
                );

            // register information for label formatter
            ticks.info = {
                higherRanks: normalizedTickInterval.higherRanks,
                unitName: normalizedTickInterval.unitName
            };

            // replace first label with 2004 year. 
            // When labels overlap, remove for example first two elements (1 change to 2):
            ticks.splice(0, 1, min);

            return ticks;
        }

As you can see, that won't preventing labels overlapping so be cautious using this.

Another solution is to set min option like you did, but with startOnTick option. But that will create some gap: http://jsfiddle.net/t3nr0kgt/5/

Upvotes: 3

Related Questions