Anna Jeanine Anna Jeanine - 28 days ago 11
Javascript Question

HighStocks needs to display categories instead of date

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']
}
});
});


enter image description here

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

Answer

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