javascriptangularchartshighchartsvenn-diagram
How to draw connectors for venn diagram chart in Highcharts?
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 Working fiddle.
- 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?
- 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 crookedLine. The connector lines in the below image look like that. Please help me, even with function.
Highcharts.chart('container', {
chart: {
type: 'venn',
marginLeft: 350,
events: {
load: drawDataLabel
}
},
title: {
text: 'EXTERNAL IP MALWARE INFECTION SUMMARY'
},
subtitle: {
text: '<span><b>85%</b> 85 IPS NOT INFETCED<span>',
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: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>15 % IPs WITH MALWRAE INFECTION</div>",
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: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>5% 5 INFECTED WITH CNCs</div>",
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: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>3% 3 IPs BLACKLISTED</div>",
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();
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/venn.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Solution
The answer is provided in the comment by @ppotaczek.
Highcharts.chart('container', {
chart: {
type: 'venn',
marginLeft: 350,
events: {
load: drawDataLabel
}
},
title: {
text: 'EXTERNAL IP MALWARE INFECTION SUMMARY'
},
subtitle: {
text: '<span><b>85%</b> 85 IPS NOT INFETCED<span>',
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: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>15 % IPs WITH MALWRAE INFECTION</div>",
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: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>5% 5 INFECTED WITH CNCs</div>",
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: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>3% 3 IPs BLACKLISTED</div>",
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;
var data = this.series[0].data;
var boxX = 5;
var baseBoxY = 50;
var baseLabelValueSvg = 20;
console.clear();
console.log(this.plotX, this.plotY, this.plotRight, this.plotLeft, this.plotTop);
this.renderer.label('15 % IPs WITH MALWRAE INFECTION', boxX, (this.yAxis[0].right + (baseLabelValueSvg + (2.5 * baseBoxY))), 'rect', data[0].plotX, data[0].plotY, true)
.css({
color: '#FFB81C'
})
.attr({
width: 210,
fill: '#FFFFFF',
'stroke-width': 2,
stroke: '#F2F2F2',
padding: 5,
fontWeight: 400,
zIndex: 6
})
.add();
this.renderer.path(['M', 210, (this.yAxis[0].right + (baseLabelValueSvg + (2.5 * baseBoxY)))+12, 'L', this.plotLeft, (this.yAxis[0].right + (baseLabelValueSvg + (2.5 * baseBoxY)))+12, 420, 200]).attr({
'stroke-width': 2,
stroke: '#FFB81C'
}).add();
this.renderer.label('5% 5 INFECTED WITH CNCs',boxX, (this.yAxis[0].right + (baseLabelValueSvg + (5.1 * baseBoxY))), 'rect', data[1].plotX, data[1].plotY, true)
.css({
color: '#FF8319'
})
.attr({
width: 210,
fill: '#FFFFFF',
'stroke-width': 2,
stroke: '#F2F2F2',
padding: 5,
fontWeight: '400',
zIndex: 6
})
.add();
this.renderer.path(['M', 210, (this.yAxis[0].right + (baseLabelValueSvg + (5.1 * baseBoxY)))+12, 'L', this.plotLeft, (this.yAxis[0].right + (baseLabelValueSvg + (5.1 * baseBoxY)))+12, 420, 250]).attr({
'stroke-width': 2,
stroke: '#FF8319'
}).add();
this.renderer.label('3% 3 IPs BLACKLISTED', boxX, (this.yAxis[0].right + (baseLabelValueSvg + (3.8 * baseBoxY))), 'rect', data[2].plotX, data[2].plotY, true)
.css({
color: '#E30000'
})
.attr({
width: 210,
fill: '#FFFFFF',
'stroke-width': 2,
stroke: '#F2F2F2',
padding: 5,
fontWeight: '400',
zIndex: 6
})
.add();
this.renderer.path(['M', 210, (this.yAxis[0].right + (baseLabelValueSvg + (3.8 * baseBoxY)))+12, 'L', 420, (this.yAxis[0].right + (baseLabelValueSvg + (3.8 * baseBoxY)))+12]).attr({
'stroke-width': 2,
stroke: '#E30000'
}).add();
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/venn.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>Anyone searching for an answer. Here is the final version based on this
- Ways to extend Array object in javascript
- Building bundle for web in vite
- Is there any way to hide the mapbox access token when initializing the map?
- Playwright - sharing state between tests
- How to create a thumbnail after cropping an image with jQuery Cropper
- Validate kendo upload control
- jQuery button click not showing/hiding content
- What's the difference between self and window?
- Small value in doughnut chart is not visible - Chartjs
- How can a function know whether it has been invoked as a constructor (using the `new` keyword)?
- What are the differences between a function expression (`function (…) { … }`) and invoking the Function constructor (`new Function(…)`)?
- Why is it possible for functions to have properties like objects? Are functions also objects?
- console.log timestamps in Chrome
- How can I count and show Unicode Characters when insert onclick to textarea?
- How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
- Creating a new Date object or using setter methods of javascript Date()
- PHP request to PHP Websocket
- Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) React TypeScript
- Is there some default popup for appstore download on itunes when webapp is viewed in mobile safari?
- Turn off webcam/camera after using getUserMedia
- Show a message if a text is copied successfully(alternative to alert)
- "Uncaught TypeError: Cannot read property 'property' of undefined" when loading style with mapbox
- How to get the first Tamil letter in a word?
- handle both mouse and touch events on touch screens
- Truncate number to two decimal places without rounding
- Tailwindcss in webpack configuration not getting applied
- How to access $children for creating Tabs component?
- How to load a gzip compressed javascript without a webserver?
- What's the yield keyword in JavaScript?
- How to get the value of a selected radio button