Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://rawgit.com/highslide-software/highcharts.com/467bfcc7d56ed227299bbbf9df2b9dfa1d2978fe/js/highcharts.src.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto;"></div>
<button id="button" class="autocompare">Update first point</button>

JavaScript

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'bubble'
        },

        series: [{
            data: [
                [0, 2, 200],
                [0, 0, 200]
            ],
            // displayNegative: true,
            negativeColor: 'red',
            sizeByAbsoluteValue: true,
            zMax: 400,
            zMin: -400
            // zThreshold: 0
        }]

    });

    // button handler
    var chart = $('#container').highcharts(),
        y = 250;
    $('#button').click(function () {
        chart.series[0].data[0].update({
            z: 0 // go to the middle
        }, true, {
         	duration: 500,
            complete: function() {
                 chart.series[0].data[0].update({
                    z: -y // go to the negative
                });
            }
        });
    });
});