Highcharts: Offset origin for positive and negative values

Question

This is what I am aiming for:

I want to have the labels on the 0-Axis. Is there a way to offset bars based on positive/negative values? I guess I should look for a callback to hook into but wasn't successful in finding one.

Any help is appreciated!

Basic bar chart fiddle:

http://jsfiddle.net/QGnmM/

Answer 1

I would come at this a different way. How about 2 charts? One to handle negative and the othe to handle positive values? You then remove the xAxis labels from one and set the x value on the other. Essentially you would set up the containers as:

<table>
    <tr>
        <td>
            <div id="container1" style="height: 400px; width:200px"></div>
        </td>
        <td>
            <div id="container2" style="height: 400px; width:200px"></div>
        </td>
    </tr>
</table>

Then you make two charts:

$('#container1').highcharts({...});
$('#container2').highcharts({...});

See this example . Things to keep in mind - turn off everything. Note that I did this in each chart. But, you could do this in a global options dialogue as well.

Answer 2

This is not perfect (overlap issue) but you can use x and y in labels to adjust the position of labels : http://jsfiddle.net/Tm6Gk/

  "xAxis": {
    "tickLength": 0,
    "labels": {
        "x": 150,
        "y": 0,
    ...