Butterfly Chart Using Highcharts

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 ()

Solution 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:

Solution 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/