Highcharts stacked Funnel chart with horizontal stacking

Question

We want a visualization looks like this in Highcharts. Can anybody help me with the implementation, I am also trying, once I get to it I will update my answer, just trying to see if anybody can help me do it faster.

Click for the solution here

Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true,
    height: 200
  },
    
    yAxis: {
        visible: false
    },
    
    xAxis: {
    lineWidth: 0,
        categories: ['a', 'b', 'c'],
    
    },

  plotOptions: {
    series: {
      stacking: 'normal',
      grouping: false,
            showInLegend: true,
      groupPadding: 0,
      pointPadding: 0,
      dataLabels: {
enabled: true,
}
    }
  },
  tooltip: {
  shared: false
  },

  series: [{
    name: "a",
    data: [
      {x: 0, low:0, high: 650},
            {x: 1, low:285, high:650},
      {x: 2, low: 430, high:640}
    ]
  }, {
    name: 'b',
    data: [
      {x: 0, low: 650, high:1025},
            {x: 1, low: 650, high: 867},
      {x: 2, low: 640, high: 670}
    ]
  }, {
        name: 'c',
        data: [
            {x: 0, low:1025, high:1220},
            {x: 1, low: 867, high: 1032},
      {x: 2, low: 670, high: 800}
        ]
    }]

});

Answer 1

I think that you should use the columnrange series to achieve the wanted result - https://www.highcharts.com/demo/columnrange

The basic attempt which you can start from: https://jsfiddle.net/BlackLabel/h5v7czmt/

Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true
  },
    
    yAxis: {
        visible: false
    },
    
    xAxis: {
        categories: ['All Applicants', 'Not Considered']
    },

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

  series: [{
    name: 'test1',
    data: [
      [0, 650],
            [285, 650]
    ]
  }, {
    name: 'test2',
    data: [
      [650, 1025],
            [650, 867]
    ]
  }, {
        name: 'test3',
        data: [
            [1025, 1220],
            [867, 1032]
        ]
    }]

});

And the API for the Highcharts Angular wrapper - https://github.com/highcharts/highcharts-angular