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}
        ]
    }]

});

score 1 · Answer 1 · answered Sep 08 '20 at 10:35

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

answered Sep 08 '20 at 10:35

Sebastian Wędzel

11,417
1
6
16

I was also trying with same, thank you for your suggestion. I will update my answer once I am done with this – Sai Babu B Sep 08 '20 at 18:03
@SaiBabuB did you find a solution for this? – manas Feb 08 '22 at 14:25
We followed the same approach and it worked – Sai Babu B Mar 25 '22 at 07:07
@SaiBabuB would you mind sharing a codepen with how you managed to style them like that? – Ovi Feb 24 '23 at 06:37
@Ovi Please check this fiddle https://jsfiddle.net/Saibabu276/tchsjzon/ – Sai Babu B Mar 03 '23 at 14:52
@SaiBabuB That's amazing, thank you! Have you also figured out a way to make the edges smoother so that it looks like a funnel? – Ovi Mar 03 '23 at 17:04
@Ovi I don't think we can achieve it in highcharts as far as I know, but if you have only single dimension data you can directly use highcharts funnel from here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/funnel – Sai Babu B Mar 09 '23 at 18:17

Highcharts stacked Funnel chart with horizontal stacking

1 Answers1