Highcharts : Venn Diagram how to show total and union numbers?

Question

I am using highchart.js to generate reports. I need to generate venn diagram like the below image :

With the help of this post and jsfiddle example, I will be able to generate Venn Diagram but not getting how to show the numbers inside the circle. I read the doc on how to pass data in the series option as given here but not able to understand how. Can we do something like this using highcharts? Please point me to some pointers or demo examples that can help me achieve the above example.

I have looked at other venn diagram generating javascript that are good to implement but as most of the report uses highcharts.js i dont want to integrate any other graph js just to get the venn diagram functionality.

Answer 1

I was able to achieve it by adding the series as :

{
              enableMouseTracking: false,

              marker: {
                enabled: false
              },
              dataLabels: {
                defer: false,
                enabled: true,
                y: 40,
                style: {
                    fontSize: '20px',
                    color: 'white'
                },
                format: '{point.name}'
              },
              keys: ['x', 'y', 'name'],
              data: [
                [5.5, 30, Chinese],
                [4, 85, English],
                [2.5, 30, Russian]
              ]
            }

complete link : http://jsfiddle.net/suprcool01/mzdx1y19/

Answer 2

Well, you can try to use dataLabels, like this: http://jsfiddle.net/AyqzZ/78/ but you will get only one label per circle.

I think the only solution is to use renderer to add texts to the chart. But first you need to calculate where put that label, and that's the hardest part - find intersection for a few circles. After that add labels this way in load event.