Statement of Changes - Highcharts

by verashn

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

// Data gathered from http://populationpyramid.net/germany/2015/
$(function () {
    Highcharts.setOptions({
        colors: ['#203770', '#3d91ce', '#498F8F', '#6E5DA4', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        lang: {
            decimalPoint: '.',
            thousandsSeparator: ','
        },
        chart: {
            style: {
                fontFamily: 'Source Sans Pro'
            }
        }
    });
    // Age categories
    var categories = ['Net Income', 'Net Cash & Securities Flows', 'Net Appreciation/Depreciation', 'Net Period Change in Value'];
    $(document).ready(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Statement of Changes'
            },

            xAxis: [{
                categories: categories,
                reversed: true,
                labels: {
                    step: 1
                }
            }],
            yAxis: {
                title: {
                    text: null
                }
            },

            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },

            tooltip: {
                formatter: function () {
                    return '<b>' + this.point.category + '</b><br/>' + Highcharts.numberFormat(this.point.y, 0);
                }
            },

            series: [{
                name: '',
                data: [24225, -509643, 243641, 0]
            }, {
                name: '',
                data: [0, 0, 0, -241778]
            }]
        });
    });

});