Highcharts: Returning N/A value instead of 0% in data label

Question

I'd like to have the y-axis data labels return 'N/A' for null values. Currently nothing is displayed. I tried using the y-formatter function to say if the y value equaled null, return N/A but haven't had luck for some reason? I'm somewhat new to Highcharts, so please forgive the basic nature of the question.

formatter: function() {
                    if (this.y !== null)
                        return 'test';

                    var chart = this.series.chart;

                    chart.renderer.text('n/a', this.point.plotX - 10, chart.plotHeight - 10).add(this.series.group)
                },

Here's the link to the JSFiddle: http://jsfiddle.net/v5vJR/

Answer 1

Remove format from your dataLabels options. Then you need to properly calculate where put that label. plotY will be undefined, since there is no value, right?

            formatter: function () {
                var str;
                if (this.y !== null) {
                    return this.y + '%';
                } else {
                    var chart = this.series.chart,
                        categoryWidth = chart.plotHeight / chart.xAxis[0].categories.length,
                        offset = (this.point.x + 1) * categoryWidth - this.point.pointWidth + 3; // 

                    chart.renderer.text('n/a', chart.plotLeft, chart.plotTop + offset).add();
                }

                return false;
            },

Demo: http://jsfiddle.net/v5vJR/3/

Answer 2

Solution
Documentation: http://api.highcharts.com/highcharts#Renderer

Fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-text/

             chart.renderer.text('<span style="color: #a2a5a1">N/A</span>', chart.plotLeft, chart.plotTop + offset)
                    .css({
                    color: '#a2a5a1',
                    fontSize: '11px'
                    })
                    .add();