how to make bubble chart in highchart selected a bubble on load - highcharts

Question

I have bubble chart in highchart plugin,Here my requirement is anyone bubble should be selected based on clicked value.for ex. if I click 10 different selection and if click on 20 different selection will be there.Can anyone please help me on it.Here is my code below.
html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<p class="num">10</p>
<p class="num">20</p>
javascript
$("p.num").show();
$("p.num").click(function(){
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
events:{
load:function(){
var points = this.series[0].points;
points[6].select();
}
}
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: {
fillColor : 'orange'
}
}
}
}
},
series: [{
data: [
[9, 81, 103],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
color: 'green',
}]
})
});
style.css
.highcharts-point-select{
stroke: orange;
}

Answer 1

Of course, you can do it. I have updated the codepen: https://codepen.io/samuellawrentz/pen/mjqmVZ
You just have to pick a point from the series data and then fire the select event on it during chart load. The condition to pick which point to be selected during load must be specified.
For now, I have hard-coded the 6th point to be selected during page load. Check out the codepen for details.
EDIT:
As you requested, I have updated the codepen,have a look. The value to be selected during click is given as a value attribute in the HTML. Then during the click event we are reading that attribute and selecting the point that was mentioned in the value attribute.
<p class="num" value=5>10</p>
Here 5th point will be selected when you click on 10 as the value of the value attribute is 5.
Ref: https://api.highcharts.com/class-reference/Highcharts.Point#select