JSFiddle - React, Tailwind, and code Playground

by rgendron

HTML

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

<div class="funnel_container" id="lifecycle_funnel_monthly">
    <svg>
      <defs>
        <marker id="fp-marker-arrow-black" markerWidth="8" markerHeight="6" refX="10" refY="5" viewBox="0 0 10 10" orient="auto" fill="#000000">
          <path id="SvgjsPath1019" d="M0 0L10 5L0 10Z "></path>
        </marker>
        <marker id="fp-marker-arrow-red" markerWidth="8" markerHeight="6" refX="10" refY="5" viewBox="0 0 10 10" orient="auto" fill="#FF0000">
          <path id="SvgjsPath1019" d="M0 0L10 5L0 10Z "></path>
        </marker>
      </defs>
    </svg>
  <div class="funnel" id="lifecycle_funnel_data_monthly" data-highcharts-chart="3">

  </div>
</div>

CSS

.funnel_container > svg { height:0 }
.funnel_container .funnel {
    height: 440px;
    width:400px;
    margin-right: 20px;
}

.funnel_container .funnel .fp-connection { stroke: #000000; stroke-width: 1px}
.funnel_container .funnel .fp-connection.highlight { stroke: #FF0000; stroke-width: 2px}
.funnel_container .funnel .fp-connection-text { font-size: 11px}
.funnel_container .funnel .fp-connection-text.highlight { font-size: 14px}
.funnel_container .funnel .fp-label-level.highlight { font-size: 15px !important}

JavaScript

var dataEx = [
    ["Created", 1, [{
      "index": 1,
      "ratio": 0.241795
    }]],
    ["Ready", 1, [{
      "index": 2,
      "ratio": 0.0623656
    }, {
      "index": 5,
      "ratio": 0.00532959
    }]],
    ["Emailed", 1, [{
      "index": 3,
      "ratio": 0.383792
    }, {
      "index": 4,
      "ratio": 0.129969
    }]],
    ["Responded", 1, [{
      "index": 5,
      "ratio": 0.240816
    }]],
    ["Prospect", 1, [{
      "index": 5,
      "ratio": 0.669811
    }]],
    ["Active", 69, []]
  ]
  $(document).ready(function() {
    var len = dataEx.length,
      sum = 0,
      minHeight = 1,
      data = [],
      showLevelLabelNumbers = false,
      neckWidth = '40%',
      neckHeight = '100%';

    for (var i = 0; i < len; i++) {
      sum += dataEx[i][1];
    }

    for (var i = 0; i < len; i++) {
      var t = dataEx[i],
        r = t[1] / sum;
      data[i] = {
        name: t[0],
        y: (r > minHeight ? t[1] : sum * minHeight),
        label: t[1]
      }
    }

    $('#lifecycle_funnel_data_monthly').highcharts({
      chart: {
        type: 'funnel',
        events: {
          load: function() {
            var chart = this;
            Highcharts.each(chart.series[0].data, function(p, i) {
              p.dataLabel.attr({
                x: (chart.plotWidth - chart.plotLeft) / 2,
                'text-anchor': 'middle'
              })
            })
          },
          redraw: function() {
            var chart = this;
            Highcharts.each(chart.series[0].data, function(p, i) {
              p.dataLabel.attr({
                x: (chart.plotWidth - chart.plotLeft) / 2,
                'text-anchor': 'middle'
              })
            })
          }
        }
      },
      title: {
        text: 'Lifecycle Summary'
      },
      tooltip: {
        enabled: false,
        formatter: function() {
          return '<b>' + this.key +
            '</b> = <b>' + Highcharts.numberFormat(this.point.label, 0, '.', ',') + '</b>';
   ...