HighCharts: Logarithmic Scale for Horizontal Bar Charts

Question

I am working with HighCharts to produce a bar chart. My values can range from as minimal as 0 to as high as 100k (example). Therefore, one bar of the graph can be very small and the other can be very long. HighCharts has introduced the feature of "Logarithmic Scaling". The example of which can be seen HERE

My js code is written in this jsfiddle file. I want to display my horizontal axis (x-Axis) logarithmically. I have inserted the key type as shown in the example but the script goes into an infinite loop which has to be stopped.

What is the flaw in the execution or is logarithmic scaling for HighCharts still not mature?

P.S The commented line in jsfiddle is causing the issue

Answer 1

It is still experimental according to the Official Documentation, so that might be the case:

"The type of axis. Can be one of "linear" or "datetime". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days.

As of 2.1.6, "logarithmic" is added as an experimental feature, but it is not yet fully implemented. Defaults to "linear".

Try it: "linear", "datetime" with regular intervals, "datetime" with irregular intervals, experimental "logarithmic" axis."

Answer 2

Since the "official" method is still buggy, you can achieve the log scale more manually by manipulating your input data with a base 10 log and masking your output data raising 10 to the output value. See it in action here http://jsfiddle.net/7J6sc/ code below.

function log10(n) {
 return Math.log(n)/Math.log(10);   
}

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar',
        marginRight: 200,
        marginLeft: 10,
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: [''],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high',
        },
        labels: {
            formatter: function() {
             return Math.round(Math.pow(10,this.value));
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -50,
        y: 100,
        floating: true,
        borderWidth: 1,
        shadow: true
    },
    tooltip: {
        formatter: function() {
            return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                   return Math.round(Math.pow(10,this.y)); 
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [log10(4396)],
        "name": "A"},
    {
        "data": [log10(4940)],
        "name": "B"},
    {
        "data": [log10(4440)],
        "name": "C"},
    {
        "data": [log10(2700)],
        "name": "D"},
    {
        "data": [log10(2400)],
        "name": "E"},
    {
        "data": [log10(6000)],
        "name": "F"},
    {
        "data": [log10(3000)],
        "name": "G"},
    {
        "data": [log10(15000)],
        "name": "E"}],

});

Answer 3

For those of you who are still looking for an answer :

JSFiddle : http://jsfiddle.net/TuKWT/76/

Or SO snippet :

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: ['A','B','C','D','E','F','G','H'],
        title: {
            text: null
        }
    },
    yAxis: {
        type: 'logarithmic',
        //min: 0, <= THIS WILL CAUSE ISSUE 
        title: {
            text: null,
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return this.x + ':' + this.y + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: false
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [4396,4940,4440,2700,2400,6000,3000,15000],
        }],

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px"></div>