Highchart ticks start point change when categories names are set

Question

I have a chart made with highcharts.js.

The graph works the way I wanted but then if I try to set the categories (programmatically or not) somehitng strange happen, the tick become smaller and move to the centre leaving a big space on the sides of the graph.

BEFORE:

AFTER:

$(function () {
    $('#container').highcharts({
        chart: {
            renderTo: 'graph',
            type: 'area',
        },
        xAxis: {
            title: {
                text: ''
            },
            startOnTick: false,
            endOnTick: false,
            tickmarkPlacement: 'on',

        },
        series: [{
            data: [['aa',29.9], ['bb',71.5], ['cc',106.4],['dd', 129.2 ]]
        }],
    });

    // the button handler
    $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.xAxis[0].setCategories(['bb', 'bb', 'cc', 'dd']);      
    });
});

See this JsFiddle: http://jsfiddle.net/MaurizioPiccini/d746v/3/

It all happens when you press the button (the categories can be set in the xAxis as well giving the same problem).

Is it possible to have named categories to start and end at the graph extremes?

Answer 1

You can use workaround which, updatse your axis with defined min/max value.

chart.xAxis[0].update({
        categories: ['bb', 'bb', 'cc', 'dd'],
        min: 0.5,
        max: 2.5
});  

http://jsfiddle.net/d746v/6/