HighStocks needs to display categories instead of date

Question

I want to use HighCharts because of the zoom function! Everything works great. There is one thing which I would like differently, but I can't seem to get it to work... My code:

http://jsfiddle.net/ma50685a/16/

$(function() {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            rangeSelector: {
                enabled: false
            },
            navigator: {
                series: {
                    type: 'column'
                }
            },
            title: {
                text: 'Overview of veggies'
            },
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },
            series: [{
                name: 'Sarah',
                data: [2,2,3,0,8]
            }, {
                name: 'Ben',
                data: [6,0,0,13,2]
            }, {
                name: 'Kiki',
                data: [3,5,1,16,3]
            }, {
                name: 'Anna',
                data: [0,5,1,3,2]
            }],
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            }
    });
});

On the x-axis I would like to display the categories! Is this possible because now it shows date?

Answer 1

As was mentioned, a stockchart works with datetime axis, but you can use a normal chart with a navigator enabled.

window.chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    rangeSelector: {
        enabled: false
    },
    navigator: {
            enabled: true,
        series: {
            type: 'column'
        }
    },

example: http://jsfiddle.net/ma50685a/26/

Navigator axis is still datetime, though. But I think mocking the datetime axis to look as the category is achievable.

Optionally, you can implement a master-detail chart. http://www.highcharts.com/demo/dynamic-master-detail

Answer 2

Not very elegant but i think this is what you want :

http://jsfiddle.net/ma50685a/23/

$(function() {
    // Create the chart
    var categoriesCptChart = 0;
    var categoriesCptStock = 0;
    var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
    window.chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        rangeSelector: {
            enabled: false
        },
        navigator: {
            series: {
                type: 'column'
            },
            xAxis: {
                labels: {
                        formatter: function() { return categories[categoriesCptStock++ % categories.length]}
                }
            }
        },
        title: {
            text: 'Overview of veggies'
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Sarah',
            data: [2,2,3,0,8]
        }, {
            name: 'Ben',
            data: [6,0,0,13,2]
        }, {
            name: 'Kiki',
            data: [3,5,1,16,3]
        }, {
            name: 'Anna',
            data: [0,5,1,3,2]
        }],
        credits: {
            enabled: false
        },
        xAxis: {
            labels: {
                formatter: function() { return categories[categoriesCptChart++ % categories.length]}
            }
        }
    });
});