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/