pyramid using columnrange

by kzoon

HTML

<script src="http://code.highcharts.com/v2.3Beta/highcharts.js"></script>
<script src="http://code.highcharts.com/v2.3Beta/highcharts-more.js"></script>
<script src="http://code.highcharts.com/v2.3Beta/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {

    window.chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: 'Temperature variation by month'
        },

        subtitle: {
            text: 'Observed in Vik i Sogn, Norway, 2009'
        },

        xAxis: {
            categories: ['Phase5', 'Phase4', 'Phase3', 'Phase2', 'Phase1']
        },

        yAxis: {
            title: {
                text: ''
            }
        },



        plotOptions: {
            columnrange: {
                pointPadding: 0,
                groupPadding: 0,
                //borderWidth: 0,
                borderWidth: 3,
                borderColor: 'red',
                shadow: false,
                dataLabels: {
                    enabled: true,
                    color: 'white',
                    formatter: function() {
                        //suppress the low datalabel
                        if (this.point.high == this.y) {

                            return this.y + 'test';
                        } else {
                            return null;
                        }

                    },
                    y: 0
                }



            }
        },

        legend: {
            enabled: false
        },

        series: [
            {
            data: [
                [-1, 1],
                [-3, 3],
                [-8, 8],
                [-10, 10],
                [-11.2, 11.2]
                ]}

               ]

    }, function(chart) {
        function posDataLab(chart) {
            $.each(chart.series[0].data, function(i, point) {

                debugger;
                var newPos = chart.yAxis[0].translate(0);
                newPos-=(point.dataLabelUpper.width/2);
                point.dataLabelUpper.attr('x', newPos);

            });
        }
        posDataLab(chart);
    });
});