title: How to draw connectors for venn diagram chart in Highcharts?
body: <p>I was trying to achieve the below chart. However, there are two problems I am facing. I am able to create most of the charts. Here is the link to <a href="https://jsfiddle.net/not_a_genius/4bzus1g3/268/" rel="nofollow noreferrer">Working fiddle</a>.</p>
  <ol>
  <li>Here I was able to get the data labels as shown in the image but I don't want to use the function. If it is possible, please tell me how?</li>
  <li>Second is the connecting lines between data labels and charts. This I was able to achieve even with any function. There is something called connector shape for pie chart in which we have one of the options as <strong>crookedLine</strong>. The connector lines in the below image look like that. Please help me, even with function.</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Highcharts.chart('container', {
    chart: {
      type: 'venn',
      marginLeft: 350,
      events: {
        load: drawDataLabel
      }
    },
    title: {
      text: 'EXTERNAL IP MALWARE INFECTION SUMMARY'
    },
    subtitle: {
      text: '&lt;span&gt;&lt;b&gt;85%&lt;/b&gt; 85 IPS NOT INFETCED&lt;span&gt;',
      useHTML: true,
      style: {
        color: '#34c52d',
        fontWeight: 400,
        padding: '2px 20px',
        border: '2px solid #F2F2F2'
      }
    },
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    plotOptions: {
      venn: {
        borderColor: 'transparent'
      }
    },
    tooltip: {
      enabled: false
    },
    series: [{
      type: 'venn',
      dataLabels: {
        enabled: false,
        align: 'left'
      },
      data: [{
          sets: ['A'],
          name: "&lt;div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'&gt;15 % IPs WITH MALWRAE INFECTION&lt;/div&gt;",
          value: 10,
          color: '#ffb81c',
          dataLabels: {
            //x: series.dataLabel.x,
            x: 0,
            y: -70,
            color: '#FFB81C',
            //borderColor: '#F2F2F2',
            //borderWidth: 2,
            useHTML: true,
            style: {
              //width: 200,
              textOutline: 'none'
            }
          }
        }, {
          sets: ['B'],
          name: "&lt;div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'&gt;5% 5 INFECTED WITH CNCs&lt;/div&gt;",
          value: 5,
          color: '#ff8319',
          dataLabels: {
            //x: 'point.x',
            //x: -363,
            y: 0,
            color: '#FF8319',
            //borderColor: '#F2F2F2',
            //borderWidth: 2,
            useHTML: true,
            style: {
              //width: 200,
              textOutline: 'none'
            }
          }
        }, {
          sets: ['C'],
          value: 2,
          name: "&lt;div style='width:36vw;  padding:0.3em; border: 2px solid #F2F2F2'&gt;3% 3 IPs BLACKLISTED&lt;/div&gt;",
          color: '#e30000',
          dataLabels: {
            //x: 'point.x',
            //x: -301,
            y: 70,
            color: '#e30000',
            //borderColor: '#F2F2F2',
            //borderWidth: 2,
            useHTML: true,
            style: {
              //width: 200,
              textOutline: 'none'
            }
          }
        },
        {
          sets: ['A', 'B'],
          value: 4.999,
          name: ' ',
          color: '#FF8319'
        },
        {
          sets: ['B', 'C'],
          value: 1.999,
          name: ' ',
          color: '#e30000'
        }
      ]
    }]
  });
  
  function drawDataLabel() {
    var points = this.series[0].points,
      point1R = points[0].shapeArgs.r;
  
  
    this.renderer.label('15 % IPs WITH MALWRAE INFECTION', 0, 150, 'rect', points[0].plotX + this.plotLeft, points[0].plotY + this.plotTop)
      .css({
        color: '#FFB81C'
      })
      .attr({
        width: 210,
        fill: '#FFFFFF',
        'stroke-width': 2,
        stroke: '#F2F2F2',
        padding: 5,
        fontWeight: 400,
        zIndex: 6
      })
      .add();
  
    this.renderer.label('5% 5 INFECTED WITH CNCs', 0, 270, 'rect', points[1].plotX + this.plotLeft, points[1].plotY + this.plotTop)
      .css({
        color: '#FF8319'
      })
      .attr({
        width: 210,
        fill: '#FFFFFF',
        'stroke-width': 2,
        stroke: '#F2F2F2',
        padding: 5,
        fontWeight: '400',
        zIndex: 6
      })
      .add();
  
    this.renderer.label('3% 3 IPs BLACKLISTED', 0, 210, 'rect', points[2].plotX + this.plotLeft, points[2].plotY + this.plotTop)
      .css({
        color: '#E30000'
      })
      .attr({
        width: 210,
        fill: '#FFFFFF',
        'stroke-width': 2,
        stroke: '#F2F2F2',
        padding: 5,
        fontWeight: '400',
        zIndex: 6
      })
      .add();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/venn.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/accessibility.js"&gt;&lt;/script&gt;
  
  &lt;figure class="highcharts-figure"&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/figure&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/zserA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zserA.png" alt="enter image description here" /></a></p>