Highcharts - Multiple Axis Graph not displaying labels

Question

I'm trying to create a multi-axis chart using the Highcharts library. I can get the Sentiment axis to display it's labels correctly, but the Number of Responses (Applicable) axis doesn't display any text labels.

The code i'm using is:

$(document).ready(function(e) {

        var perShapeGradient = {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        };

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'GraphContainer',
                height: 275,
                marginTop: 30
            },
            colors: 
            [
                {
                    linearGradient: perShapeGradient,
                    stops: 
                    [
                        [0, 'rgba(186, 186, 186, 1)'],
                        [1, 'rgba(232, 232, 232, 0.8)']
                    ]
                }
            ],
            title: {
                text: null
            },
            plotOptions: {
                line: {
                    lineWidth: 1,
                    marker: {
                        radius: 6,
                        fillColor: '#fff',
                        lineColor: '#e10019',
                        lineWidth: 1.5,
                        states:
                        {
                            hover:
                            {
                                radius: 8,
                                fillColor: '#e10019',
                                lineColor: '#fff',
                                lineWidth: 2
                            }
                        }
                    }
                }
            },
            xAxis: {
                categories: ['13 May', '20 May'],
                title: 'Week Commencing'
            },
            yAxis: [{
                labels: {
                    endOnTick: true,
                    formatter: function() {
                        return this.value + '%';
                    },
                    style: {
                        color: '#e10019',
                        fontSize: 10
                    }
                },
                title: {
                    text: '% rated as 4 or 5',
                    rotation: 270,
                    offset: 75,
                    style: {
                        color: '#f49fa8',
                        fontSize: 11,
                        fontWeight: 'normal'
                    }
                },
                max: 100,
                opposite: true
            }, {
                gridLineWidth: 0,
                title: {
                    text: 'Number of responses',
                    style: {
                        color: '#888',
                        fontSize: 11,
                        fontWeight: 'normal'
                    }
                },
                labels: {
                    formatter: function() 
                    {
                        x = this.value.toString();
                        var pattern = /(-?\d+)(\d{3})/;
                        while (pattern.test(x))
                            x = x.replace(pattern, "$1,$2");
                        return x;
                    },
                    style: {
                        color: '#888',
                        fontSize: 10
                    }
                }

            }],
            tooltip: {
                formatter: function() {

                    var unit = {
                    'Applicable': '',
                    'Sentiment': '%'
                    }[this.series.name];

                    return 'Week Commencing ' + this.x +': '+ this.y +' '+ unit;

                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Applicable',
                type: 'column',
                data: [307, 200]
            }, {
                color: '#e10019',
                name: 'Sentiment',
                type: 'line',
                data: [44.3, 20]
            }]
        });

    });

I've also created a JS Fiddle: http://jsfiddle.net/9MrYd/1/

Just found this while starting to write up my own question for this very issue. I had the same problem, except that the secondary axis labels would appear when I resized the window, even just a pixel. If anyone stumbles upon this and has an explanation for that behavior, I'd be interested to understand why that was happening. Both the yAxis.linkedTo and series.yAxis properties solved my issues by the way, and it made more sense in my case to use yAxis.linkedTo. — zigzag

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2013-06-06T15:14:34

It doesn't display any values, because no linked parameter is set for yAxis or no series is linked to this yAxis. You need to set yAxis parametr for first or second series

http://jsfiddle.net/9MrYd/4/

or use linkedTo parameter:

http://jsfiddle.net/9MrYd/5/

http://api.highcharts.com/highcharts#yAxis.linkedTo http://api.highcharts.com/highcharts#series.yAxis

Highcharts - Multiple Axis Graph not displaying labels

1 Answers