CODEWITHSUNDEEP
javascriptjqueryhighcharts
Miguel Stevens
Miguel Stevens

Reputation: 9201

Highcharts X-axis labels on the side

I'm using Highcharts, and I used to be able to get labels on the side. But it's not working now, am I missing something? The red arrow is where I would want the labels like in the following example.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/

enter image description here

This is the code I'm using, I add the series in a dynamic way.

 credits: {
                enabled: false
            },
            chart: {
                type: 'bar'
            },
            xAxis: {
                categories: ['Jan', 'Feb'],
                labels: {
                    enabled: true,
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Score',
                    align: 'high'
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            }
        });

        // Add Series
        var detailchart = $('#chart-detail').highcharts();
        var categories = new Array;

        // Set Chart Title
        detailchart.setTitle({text: results[0].category});

        $.each(results, function(i, data){
            categories.push(data.name);
            detailchart.addSeries({
                name: data.name,
                data: [data.score]
            });
        });

        detailchart.xAxis[0].setCategories(["1", "2"]);
        $('#chart-detail').highcharts().reflow();

Results is an array that looks like this (I get it through ajax):

enter image description here

Upvotes: 6

Views: 373

Answers (2)

Iman Kianrostami
Iman Kianrostami

Reputation: 502

As I understand from your code here, you wish to specify two categories with names 1 and 2 but you are not specifying any data for second category, So the only category that is showing on your chart is 1. Your data array for each series must have elements per each category. For example if you have two category you should consider having two data elements in each series. In this line data: [data.score] you are just specifying one element in data array. Your code should be something like this: (make it dynamic per your need)

$.each(results, function(i, data){
        categories.push(data.name);
        detailchart.addSeries({
            name: data.name,
            data: [data.score, 40], //40 is some data for your second category.
        });
    });

Demo: http://jsfiddle.net/u6crkatv/

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Only what you need is use 4 series, each of them with single data point.

series: [{
        name: 'Year 1800',
        data: [107]
    }, {
        name: 'Year 1900',
        data: [138]
    }, {
        name: 'Year 2008',
        data: [973]
    },{
        name: 'Year 20098',
        data: [973]
    }]

Example: http://jsfiddle.net/y9wzggc4/

Upvotes: 0

Related Questions