Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/funnel.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

// Give the points a 3D feel by adding a radial gradient
Highcharts.setOptions({
  colors: $.map(Highcharts.getOptions().colors, function(color) {
    return {
      linearGradient: {
        x1: 0,
        x2: 1,
        y1: 0,
        y2: 0
      },
      stops: [
        [0, color],
        [0.5, Highcharts.Color(color).brighten(-0.2).get('rgb')],
        [1, color]
      ]
    };
  })
});

(function(factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function(Highcharts) {
  (function(Highcharts) {
    // create shortcuts
    var seriesType = Highcharts.seriesType,
      seriesTypes = Highcharts.seriesTypes,
      noop = Highcharts.noop,
      pick = Highcharts.pick,
      each = Highcharts.each;


    seriesType('funnel3d', 'funnel', {},
      // Properties
      {
        translate: function() {

          var
            // Get positions - either an integer or a percentage string
            // must be given
            getLength = function(length, relativeTo) {
              return (/%$/).test(length) ?
                relativeTo * parseInt(length, 10) / 100 :
                parseInt(length, 10);
            },

            sum = 0,
            series = this,
            chart = series.chart,
            options = series.options,
            reversed = options.reversed,
            ignoreHiddenPoint = options.ignoreHiddenPoint,
            plotWidth = chart.plotWidth,
            plotHeight = chart.plotHeight,
            cumulative = 0, // start at top
            center = options.center,
            centerX = getLength(center[0], plotWidth),
            centerY = getLength(center[1], plotHeight),
            width = getLength(options.width, plotWidth),
            tempWidth,
            getWidthAt,
            height = getLength(options.height, plotHeight),
            neckWidth = getLength(options.neckWidth, plotWidth),
            neckHeight =...