Highcharts: Logarithmic chart with Y Axis [100, 99.9, 99, 90, 0]

Question

I am trying to use Highcharts to generate our website's availability information. The Y axis is availability in percentage, the expected labels are:

[100, 99.9, 99, 90, 0]

code: http://jsfiddle.net/2E9vF/1/

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: "AVAILABILITY %"
            },
            labels: {
                formatter: function() {
                    return 100-this.value;
                }
            },
            type: 'logarithmic',
            reversed:true,
            min:0.01,
            plotLines: [{
                color: '#CCCCCC',
                width: 2,
                value: 0.1,
                dashStyle: 'ShortDot'
            },{
                color: 'red',
                width: 2,
                value: 1,
                dashStyle: 'ShortDot'
            },{
                color: '#CCCCCCC',
                width: 2,
                value: 10,
                dashStyle: 'ShortDot'
            }],
        },
        tooltip: {
            formatter: function() {
                return 'x:'+ this.x +'<br>'+
                    'y:'+ (100-this.y);
            }
        },        
        series: [{
            // real data:
            // [90, 98, 99.7, 100, 100, 99.9, 99.7, 90, 91, 98, 96, 97.3]
            data: [10, 2, 0.3, 0, 0, 0.1, 0.3, 10, 9, 2, 4, 2.7]        
        }]
    });
});

However, I have two issues that I need help with:

1. I cannot draw 100 in the y axis
2. Orginal data with value 100 cannot be shown in the chart

Here is the expected chart: http://www.shareimage.ro/images/0j1o0bnccavkqds8icuy.jpg

Answer 1

In general negative numbers and zero-based are not supported, but you can workaround this: http://jsfiddle.net/2E9vF/2/

In steps:

• Assume that value 0 will be represented as other one, for example 0.001 (or lower)

• Set min for yAxis to that value

• Update formatters for tooltip and yAxis.labels accordingly:

  tooltip: {
      formatter: function() {
          if(this.y === 0.001) {
              return 'x:'+ this.x +'<br>'+  'y:100';
          } else {
              return 'x:'+ this.x +'<br>'+  'y:'+ (100-this.y);
          }
      }
  },   
  

And:

    yAxis: {
        labels: {
            formatter: function() {
                if(this.isFirst) {
                      return 100;  
                } 
                return 100-this.value;
            }
        }
    }