How to place labels on opposite Y axis in Highchart without a second series

Question

I currently have the following chart set up in Highcharts:

// Initialize the chart when the document loads.
$(document).ready(function() {
    $('#results').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: [{
            categories: [
                'Injustice: Gods Among Us ★',
                'Tekken Tag Tournament 2 ★',
                'Super Smash Bros. Melee ★',
                'Persona 4 Arena',
                'King of Fighters XIII',
                'Dead or Alive 5 Ultimate',
                'Street Fighter X Tekken Ver. 2013',
                'Soulcalibur V'
            ],
        }],
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Votes'
            }
        },
        series: [{
            data: [
                {y:1426,color:'#29A329'},{y:823,color:'#29A329'},
                {y:462,color:'#29A329'},{y:305,color:'#CC0000'},
                {y:181,color:'#CC0000'},{y:148,color:'#CC0000'},
                {y:127,color:'#CC0000'},{y:115,color:'#CC0000'}
            ],
            dataLabels: {
                color: '#FFFFFF',
                enabled: true,
                inside: true
            },
            showInLegend: false,
            name: 'Votes'
        }]
    });
}); 

This produces a chart that looks like this:

• Live example.
• jsFiddle

What I'd like to do is have labels on the Y Axis on the opposite side (it's a string, nothing special).

I can add another series with empty data points, and get the labels I want (I'm writing the Javascript into the page from the server side to get this effect) with the following code additions:

// Initialize the chart when the document loads.
$(document).ready(function () {
    $('#results').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: [{
            categories: [
                'Injustice: Gods Among Us ★', 
                'Tekken Tag Tournament 2 ★', 
                'Super Smash Bros. Melee ★', 
                'Persona 4 Arena', 
                'King of Fighters XIII', 
                'Dead or Alive 5 Ultimate', 
                'Street Fighter X Tekken Ver. 2013', 
                'Soulcalibur V'
         ],
        }, {
            categories: [
                '8/5/2013 8:59 PM',
                '8/5/2013 12:59 PM',
                '8/5/2013 2:59 PM',
                '8/5/2013 6:59 PM',
                '8/5/2013 12:59 AM',
                '8/5/2013 3:59 PM',
                '8/5/2013 8:23 PM',
                '8/5/2013 8:19 PM'],
            opposite: true,
            title: {
                text: 'Last vote cast at'
            }
        }],
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Votes'
            }
        },
        series: [{
            data: [{
                y: 1426,
                color: '#29A329'
            }, {
                y: 823,
                color: '#29A329'
            }, {
                y: 462,
                color: '#29A329'
            }, {
                y: 305,
                color: '#CC0000'
            }, {
                y: 181,
                color: '#CC0000'
            }, {
                y: 148,
                color: '#CC0000'
            }, {
                y: 127,
                color: '#CC0000'
            }, {
                y: 115,
                color: '#CC0000'
            }],
            dataLabels: {
                color: '#FFFFFF',
                enabled: true,
                inside: true
            },
            showInLegend: false,
            name: 'Votes',
            xAxis: 1
        }, {
            data: [0, 0, 0, 0, 0, 0, 0, 0],
            showInLegend: false
        }]
    });
});

jsFiddle

This gets me almost exactly what I want, except for one thing, the bars are now thinner, as space was made to accommodate the fake data series that isn't meant to be shown:

The question is, how do I get the labels on the right-side without these side effects? Note that I don't necessarily need the second data series, it's just the closed I've come to a solution. As long as the bars are displayed normally, I don't mind the mechanism by which those values on the right hand side are written.

Answer 1

You want a linked axis http://jsfiddle.net/U5Dhw/

xAxis: [{
            categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
        },
        {
        categories: ['Fred', 'Tom', 'Bill', 'David', 'Nathan', 'Charles', 'Mike', 'Andrew'],
            linkedTo: 0,
            opposite: true
        }],

http://api.highcharts.com/highcharts#xAxis.linkedTo