Highcharts Custom Funnel

Question

I'm new to the Highcharts library and need to create a horizontal funnel. There is an existing funnel: http://www.highcharts.com/demo/funnel but there are no options to make it horizontal. I've been reading through the docs on how to extend highcharts but I don't see how this can be done. Is it possible to create this horizontal funnel with Highcharts?

Answer 1

Unfortunately it's not supported

http://forum.highcharts.com/post100466.html?hilit=funnel%20orientation#p100466

Answer 2

It is not a chart from the image you posted, but you could get inverted pyramid/funnel from stacked area series.

Example: http://jsfiddle.net/r9mtoec8/

$(function() {
  var rawData = [7, 14, 16, 5, 4],
    data = [
      [0, 100]
    ],
    overData = [
      [0, 0]
    ],
    underData = [
      [0, 0]
    ],
    zones = [],
    len = rawData.length,
    colors = Highcharts.getOptions().colors,
    maxColor = colors.length,
    i, val, sum = 0,
    pos = 0;

  for (i = 0; i < len; i++) {
    sum += rawData[i];
  }

  for (i = 0; i < len; i++) {
    pos += rawData[i];
    val = (sum - pos) / sum * 100;
    data.push([pos, val]);
    overData.push([pos, (100 - val) / 2]);
    underData.push([pos, (100 - val) / 2]);
    zones.push({
      value: pos,
      color: colors[i % maxColor]
    });
  }



  $('#container').highcharts({
    chart: {
      type: 'area'
    },
    yAxis: {
      title: {
        text: 'Percent'
      }
    },
    plotOptions: {
      area: {
        enableMouseTracking: false,
        showInLegend: false,
        stacking: 'percent',
        lineWidth: 0,
        marker: {
          enabled: false
        }
      }
    },
    series: [{
      name: 'over',
      color: 'none',
      data: overData
    }, {
      id: 's1',
      name: 'Series 1',
      data: data,
      showInLegend: true,
      zoneAxis: 'x',
      zones: zones
    }, {
      name: 'under',
      color: 'none',
      data: underData
    }]
  });
});

You chart from the image is doable in Highcharts, but you would need to modify your data and chart's setting. Dotted lines can be done using line with set dash style. Example: http://jsfiddle.net/r9mtoec8/22/