DemoBubble
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
JavaScript
var chart = new Highcharts.Chart({
chart: {
defaultSeriesType: 'scatter',
renderTo: 'container'
},
tooltip: {
snap: 5
},
plotOptions: {
scatter: {
marker: {
symbol: 'circle',
lineWidth: 2
}
}
},
series: [
{
name: 'America',
marker: {
fillColor: 'rgba(69,114,167,0.75)',
lineColor: 'rgba(69,114,167,0.75)',
states: {
hover: {
fillColor: 'rgba(69,114,167,0.50)',
lineColor: 'rgba(69,114,167,0.50)',
lineWidth: 0,
}
}
},
data: [{
x: 29.9,
y: 125,
marker: {
radius: 10
},
states: {
hover: {
radius: 10
}
}},
{
x: 50.2,
y: 150,
marker: {
radius: 55.5,
states: {
hover: {
radius: 55.5
}
}
}},
{
x: 52.2,
y: 150,
marker: {
radius: 45,
states: {
hover: {
radius: 45
}
}
}}
]},
{
name: 'Europe',
marker: {
fillColor: 'rgba(170,70,67,0.75)',
lineColor: 'rgba(170,70,67,0.75)',
states: {
hover: {
fillColor: 'rgba(170,70,67,0.50)',
lineColor: 'rgba(170,70,67,0.50)',
lineWidth: 0,
}
}
},
data: [
{
x: 60.4,
y: 144,
marker: {
radius: 25,
...