Develop Reference

Bubble chart (relations between bubbles)

Please can you tell me, is it possible to create relations between bubbles (lines from one bubble to other(s))?
Example:
SE->FL->NL
FL->DE
SE->BE->DE
DE->NL
Demo:
http://jsfiddle.net/2pLog7fw/

Sure, it can be done. One way of creating lines is to set lineWidth to be higher than zero for bubble series.
Live demo: http://jsfiddle.net/kkulig/2d7u7orx/
But this only creates one relation within a series (from the first point to the last one).
The solution here is to create a new scatter series for every relation:
{
data: [
[80.3, 86.1],
[80.8, 91.5],
[80.4, 102.5]
], // SE -> FI -> NL
type: 'scatter'
}, {
data: [
[86.5, 102.9],
[80.4, 102.5]
], // DE -> NL
type: 'scatter'
}
Configuration for all scatter series (plotOptions):
scatter: {
lineWidth: 1, // show the line
marker: {
radius: 0
}
}
Live demo: http://jsfiddle.net/kkulig/x8r6uj5q/
If you want an arrow that shows the direction of the relation you can use the code from this demo: http://jsfiddle.net/kkulig/mLsbzgnp/

This is right answer for my question:
"You can use scatter series to connect bubbles"
https://github.com/highcharts/highcharts/issues/7410
Example
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 15.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 16,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 16,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 18.8,
name: 'SE',
country: 'Sweden'
}]
}, {
type: 'scatter',
lineWidth: 1,
enableMouseTracking: false,
data: [
[95, 95], [86.5, 102.9],
[86.5, null],
[86.5, 102.9], [80.4, 102.5],
[86.5, null],
[86.5, 102.9], [80.3, 86.1]
]
}]
});
Live demo: http://jsfiddle.net/2pLog7fw/1/

How to get Category name when click on the chart stack area in High charts?

I need to get Category name (Age>90 Days,Age<90 Days,Age<60 Days,Age<30 Days,Age<14 Days,Age<7 Days) when click on the related area of the graph.
For example when I click on the red area it want to alert "Age > 90 Days".
Graph Image is here!!!
Here is the my Hi chart code.
Highcharts.chart('ageContainer', {
chart: {
type: 'area',
},
colors: ['#39AA59', '#CEAE22', '#3E90BC','#B787E6','#ea780e','#F85858'].reverse(),
title: {
text: 'Age of queued patches during the last year'
},
xAxis: {
categories: lastMonthsName,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Patch count'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
split: true,
valueSuffix: ' patches'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Age > 90 Days',
data: getData[5]
},{
name: 'Age < 90 Days',
data: getData[4]
},{
name: 'Age < 60 Days',
data: getData[3]
},{
name: 'Age < 30 Days',
data: getData[2]
},{
name: 'Age < 14 Days',
data: getData[1]
},{
name: 'Age < 7 Days',
data: getData[0]
}]});

Check plotOptions.area.events.click for more info.Also see plotOptions.area.trackByArea. Your post does not contain live example. Using official example to give solutions.Hope this helps
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function() {
return this.value / 1000;
}
}
},
tooltip: {
split: true,
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
},
series: {
cursor: 'pointer',
trackByArea: true,
stickyTracking: false,
events: {
click: function(event) {
alert(this.name)
}
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

*Highcharts* Get rid of the color in the percentage area chart

I have a percentage area chart like this: http://www.highcharts.com/demo/area-stacked-percent and want to ask that are there any ways to get rid of the area's color ? so that we have only the lines and the white background ?

I guess this is what you're looking for:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:#ffffff">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

You can use fillColor inside plotOptions --> area something like below.
plotOptions: {
area: {
fillColor: 'rgba(0, 0, 0, 0)',
stacking: 'percent',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
},
}
The working fiddle can be found here.
For demonstration i have used the same example as high chart.

$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
color: 'white',
stacking: 'percent',
lineColor: 'black',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: 'black'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
the only problem is that line color will be same.

Highcharts y-axis label floating issue

I am using Highcharts in my project and facing an issue with the y-axis label in bar chart becoming misaligned. Please use the given code in jsFiddle to view the issue.
JavaScript code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: [{
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
opposite: true
},
{
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
}],
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
yAxis: 0,
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
yAxis: 0,
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
yAxis: 1,
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});});
Html code:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="chartContainer" style="min-width: 310px; max-width: 800px; height: 600px; margin: 0 auto"></div>

Highcharts - label placement for categorized y-axis

I have a chart comparing boolean data for two people over a number of years.
The jsfiddle below represents what I need except that I need the labels on the bottom axis to be aligned with the centre of the red and green blocks and to not have the 5 appear on the rightmost tick.
http://jsfiddle.net/zzella/Xa46f/3/
Anybody have any ideas how to achieve this for the above chart, or perhaps a better way to structure the data so as to obtain the results I need?
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'bar'
},
title: {
text: 'Action completed for year (Yes/No)'
},
xAxis: {
categories: ['Person 1', 'Person 2'],
labels: {
align: 'left',
style: {
fontSize: '13px',
fontFamily: 'Arial'
},
y: -45,
x: 60
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
},
yAxis: {
type: 'category',
categories: ["2010","2011","2012","2013", "2014"],
title: false,
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
gridLineColor: '#FFFFFF',
},
legend: false,
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
},
formatter: function () {
console.log(this);
return this.key
}
},
},
},
series: [{
name: '2014',
data: [{
name: "2014: no",
color: "#a50000",
y: 1
}, {
name: "2014: yes",
color: "#006500",
y: 1
}],
}, {
name: '2013',
data: [{
name: "2013: yes",
color: "#006500",
y: 1
}, {
name: "2013: yes",
color: "#006500",
y: 1
}]
}, {
name: '2012',
data: [{
name: "2012: yes",
color: "#006500",
y: 1
}, {
name: "2012: no",
color: "#a50000",
y: 1
}]
}, {
name: '2011',
data: [{
name: "2011: no",
color: "#a50000",
y: 1
}, {
name: "2011: yes",
color: "#006500",
y: 1
}]
}, {
name: '2010',
data: [{
name: "2010: no",
color: "#a50000",
y: 1
}, {
name: "2010: no",
color: "#a50000",
y: 1
}]
}]
});
});

One wait to attain this is by adding a label format to your yAxis, like you did to your xAxis. If you add labels: { x: 40 }, the labels will center along the boxes.
To get rid of the random 5, you can do showLastLabel: false.
Here is the final yAxis that does what you described:
yAxis: {
type: 'category',
categories: ["2010","2011","2012","2013", "2014"],
title: false,
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
gridLineColor: '#FFFFFF',
labels: {
x: 40
},
showLastLabel: false
},
Link to the Fiddle.