Butterfly Chart using Highcharts

Question

I'm trying to create a butterfly chart using Highcharts. I want to plot it as

The Code is as follows

// Data gathered from http://populationpyramid.net/germany/2015/
$(function () {
// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19',
        '20-24', '25-29', '30-34', '35-39', '40-44',
        '45-49', '50-54', '55-59', '60-64', '65-69',
        '70-74', '75-79', '80-84', '85-89', '90-94',
        '95-99', '100 + '];
$(document).ready(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Population pyramid for Germany, 2015'
        },
        subtitle: {
            text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
        },
        xAxis: [{
            categories: categories,
            reversed: false,
            labels: {
                step: 1
            }
        }, /*{ // mirror axis on right side
            opposite: true,
            reversed: false,
            categories: categories,
            linkedTo: 0,
            labels: {
                step: 1
            }
        }*/],
        yAxis: {
            title: {
                text: null
            },
            labels: {
                formatter: function () {
                    return Math.abs(this.value) + '%';
                }
            }
        },

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

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

        series: [{
            name: 'Male',
            data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
                -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
                -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
        }, {
            name: 'Female',
            data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
                3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
                1.8, 1.2, 0.6, 0.1, 0.0]
        }]
    });
});

});

Here is my fiddle link, how can I get my xAxis labels in between the series. Please guide me to achieve this.

Answer 1

I would approach this differently than morgan did, though that example is certainly useful.

I would do this as a standard bar chart, making use of multiple yAxis objects (one for each series), which also allows for using the reversed property of the left-facing series.

Code Example:

    yAxis: [{
        title: { text: null },
        width: 200,
        reversed: true
    },{
        offset: 0,
        title: { text: null },
        left: 300,
        width: 200
    }],
    series: [{
      yAxis: 0,
      data: [...]
    }, {
      yAxis: 1,
      data: [...]
    }]

Fiddle:

• http://jsfiddle.net/jlbriggs/L80cdxm0/

Example Output:

Answer 2

An inverted columnrange chart combines with the cross-specific-values plugin is a way to go. A column range chart allows you to specify position of the columns and make the space for labels. The plugin moves the axis to the center of the chart.

    Highcharts.chart('container', {
    title: {
      text: 'Butterfly Chart Example'
    },

    subtitle: {
        text: '<a href="http://stackoverflow.com">stackoverflow.com</a>'
    },

    chart: {
        type: 'columnrange',
        inverted: true,
        marginTop: 100
    },

    legend: {
      verticalAlign: 'top',
      y: 60,
      x: -25,
      itemDistance: 50
    },

    xAxis: {
        categories: ['G7', 'A8', 'V9', 'V4', 'V3', 'V1', 'V5'],
        crossing: 118,
        lineWidth: 0,
        tickLength: 0,
    },

    yAxis: {
      gridLineWidth: 0,
      tickInterval: 50,
      min: 0,
      max: 250,
      lineWidth: 1,
      title: {
        text: null
      }
    },

    plotOptions: {
      series: {
        grouping: false
      }
    },

    series: [{
        name: 'South',
        color: 'blue',
        data: [
          [55, 100],
          [60, 100],
          [65, 100],
          [55, 100],
          [75, 100],
          [52, 100],
          [60, 100]
        ]
    }, {
      name: 'North',
      color: 'orange',
      data: [
        [120, 170],
        [120, 150],
        [120, 175],
        [120, 130],
        [120, 125],
        [120, 148],
        [120, 145]
      ]
    }]

});

example: http://jsfiddle.net/7d4mrhuv/