CHART - Plus Minus Value Tree

author(s): Torstein Hønsi

by bizamajig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

$(function () {
    var series = [{
        data: [-4068, -3420, -3408]
    }, {
        data: [-691, 2328, 2328]
    }, {
        data: [2328, 693, 881]
    }, {
        data: [-4888, -4837, -3945]
    }, {
        data: [386, 383, 383]
    }];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar',
            height: 400
        },
        title: {
            text: 'Änderungen der Waldflächen',
            style: {
                fontFamily: 'Arial',
                fontSize: 20,
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        },
        credits: {
            text: 'Quelle: FAO',
            href: 'http://'
        },
        xAxis: [{
            categories: [],
            reversed: true,
            labels: {
                step: 1
            },
            tickWidth: 0
        }, {
            // mirror axis on right side
            opposite: true,
            reversed: true,
            categories: [],
            linkedTo: 0,
            tickWidth: 0
        }],
        yAxis: {
            title: {
                text: 'Millionen Hektar pro Jahr',
                align: 'high',
                /* offset: -60, */
                rotation: 0
                /* y: -25 */
            }
        },
        exporting: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            backgroundColor: '#FFFFFF',
            floating: false,
            y: 40
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                shadow: false,
                pointWidth: 5
            }
        },
       ...