CODEWITHSUNDEEP
javascriptgraphhighcharts
Cihad Turhan
Cihad Turhan

Reputation: 2849

How to add categories related to legend in HighCharts?

I've almost finished my graph except one problem. I want to link each unique series with legend and categories. I want to put a number under each chart and these numbers will be shown in the legend. So let me explain visually.

Here is what I've done:

enter image description here

And here is what I want to do:

enter image description here

See? It always put 0 in the bottom? But I want to put separate number for each bar like in second one.

Here is the jsfiddle .

I didn't want to do with pure HTML because I concern about positioning.

PS: I've already tried categories: [1,2,3,4,5] but it's no use.

Upvotes: 0

Views: 1856

Answers (2)

SteveP
SteveP

Reputation: 19093

The reason that categories dont work for you is that you have specified 5 series with 1 datapoint, whereas the categories relate to 5 datapoints. If you specify your data like this:

var data = [{data:[
    {
        x:1,y:6793,name:'lorem',pname:'some explanation',chid:9,color:'red'
    },
    {
        x:2,y:4237,name:'ipsum',pname:'some explanation',chid:7
    },
    {
        x:3,y:3384,name:'dolor',pname:'some explanation',chid:23
    },
    {
        x:4,y:2542,name:'sit',pname:'some explanation',chid:1
    },
    {
        x:5,y:724,name:'amet',pname:'some explanation',chid:1
    }
]}
];

http://jsfiddle.net/Z5VPw/

you can get it to work as there are 5 categories and 5 datapoints.

I had to modify your function to iterate over the points, not the series:

$.each(chart.series[0].points, function (i, series) {

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can set categories as you posted,

http://jsfiddle.net/yTFTb/

xAxis: {
            categories: [
                '1',
                '2',
                '3',
                '4',
                '5'
            ]
        },

or set min/tickInterval values for xAxis.

http://jsfiddle.net/yTFTb/2/

http://api.highcharts.com/highcharts#xAxis.min http://api.highcharts.com/highcharts#xAxis.tickInterval

Upvotes: 1

Related Questions