Is it possible to have the "name" key of each object in the series be the x-axis label?

    series: [{
        "data": [3570.5],
            "name": "R",
            "id": 0
    }, {
        "data": [3000],
            "name": "S",
            "id": 1
    }, {
        "data": [2500],
            "name": "T",
            "id": 2
    }]

For example, I would like column 1 to have an x-axis label of "R", column 2 to have an x-axis label of "S", etc. I have tried assigning the x-axis categories

xAxis: {categories: ['R', 'S', 'T']}

But only the "R" label shows up on the x-axis. I have also tried to format the series differently:

        series: [{
        "data": [3570.5, null, null],
        "name": "R",
        "id": 0
    }, {
        "data": [null, 3000, null],
        "name": "S",
        "id": 1
    }, {
        "data": [null, null, 2500],
        "name": "T",
        "id": 2
    }]

But that plicates the ease with which I can change the series visibility, i.e. auto-resizing both axes, hiding the full column and then putting the hidden column back in its original spot when trying to show again.

plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        var id = this.series.options.id;
                        var chart = $('#container').highcharts();
                        var isVisible = chart.get(id).visible;
                        chart.get(id).setVisible(!isVisible);
                    }
                }
            }
        }
    }

/

Is it possible to have the "name" key of each object in the series be the x-axis label?

    series: [{
        "data": [3570.5],
            "name": "R",
            "id": 0
    }, {
        "data": [3000],
            "name": "S",
            "id": 1
    }, {
        "data": [2500],
            "name": "T",
            "id": 2
    }]

For example, I would like column 1 to have an x-axis label of "R", column 2 to have an x-axis label of "S", etc. I have tried assigning the x-axis categories

xAxis: {categories: ['R', 'S', 'T']}

But only the "R" label shows up on the x-axis. I have also tried to format the series differently:

        series: [{
        "data": [3570.5, null, null],
        "name": "R",
        "id": 0
    }, {
        "data": [null, 3000, null],
        "name": "S",
        "id": 1
    }, {
        "data": [null, null, 2500],
        "name": "T",
        "id": 2
    }]

But that plicates the ease with which I can change the series visibility, i.e. auto-resizing both axes, hiding the full column and then putting the hidden column back in its original spot when trying to show again.

plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        var id = this.series.options.id;
                        var chart = $('#container').highcharts();
                        var isVisible = chart.get(id).visible;
                        chart.get(id).setVisible(!isVisible);
                    }
                }
            }
        }
    }

http://jsfiddle/calanoue/suw6xweh/

• javascript
• jquery
• highcharts

2 Answers 2

You were properly setting your xAxis categories. However, you were only ever setting one point. Highcharts is defaulting to that point going to index 0 (the "R"). Try setting the xAxis category index and use the {x, y} point format:

series: [{
    data: [{x:0, y:3570.5}],
        name: "R",
        id: 0
}, {
    data: [{x:1, y:3000}],
        name: "S",
        id: 1
}, {
    data: [{x:2, y:2500}],
        name: "T",
        id: 2
}]

The x: values are the category index you want populated.

You can try by adding name to each data point as in this DEMO.

$(function () {



var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',

    },
    xAxis: {
      categories: ['R', 'S', 'T'],


    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        changeSeriesVisibility(this.series.options.id);
                    }
                }
            }
        }
    },
    series: [{
        data : [{ x : 0,
                 y : 3750,
                 name : "R"},
                {
                    x : 1,
                    y: 3000,
                    name: "S"
                },
                {
                    x : 2,
                    y : 2500,
                    name : "T"
                }
               ]
    },

        ]
});

function changeSeriesVisibility(id) {
    // Hide/Show the series on click

    var chart = $('#container').highcharts();
    var isVisible = chart.get(id).visible;
    chart.get(id).setVisible(!isVisible);
}
});