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/
Related
I'd like to change the color of a single point where its value is lower than 60%.
(For example, turn the blue color of two points which are in the pink area into a red color.)
Is this possible?
Thanks in advance!
Javascript:
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 100
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
color: 'blue',
pointPlacement: 'on',
data: [83, 79, 40, 35, 97, 80],
pointPlacement:'on',
}, {
name: 'lower than 60%',
data: [60,60,60,60,60,60],
pointPlacement: 'on',
lineWidth: 2,
type: 'area',
color: '#ffbce6',
dashStyle: 'shortdash',
}]
});
JS Fiddle
One of the options is to change the data for your Allocated Budget series to this:
data: [83, 79, {y:40, color:'red'}, {y:35, color:'red'}, 97, 80]
Check the updated fiddle https://jsfiddle.net/mpof48nu/
I'm trying to figure out if there is some way to plot a line per category in highcharts, i've tried for a while following this doc and my current chart looks like this:
What i want to achieve is something like this:
with each line stoping on the next category, this way i can set "goals" per category.
My code so far
Highcharts.chart('container', {
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'
},
plotLines: [{
color: 'red',
value: 300,
width: 2
}]
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Gastos',
data: [107, 31, 635, 203, 2],
color: '#f25a41'
}, {
name: 'Renda',
data: [133, 156, 947, 408, 6],
color: '#5c90f9'
}]
});
The easiest way would be to create custom marker for each category using Renderer.path() function.
API Reference:
http://api.highcharts.com/highcharts/Renderer.path
Example:
https://jsfiddle.net/809y2wcn/
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>
So, I've bene looking at the highcharts API, for an option to change the color of the point background color, when hovering the chart.
This is my current chart: JSFiddle Example
And the code:
$(function () {
$('#main-chart').highcharts({
chart: {
type: 'area'
},
plotBorderColor: '#000000',
plotBackgroundColor: '#000000',
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Number of Clicks'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
}, {
name: 'USSR/Russia',
lineColor: '#44d99f',
color: '#f1faf7',
data: [215, 125, 450, 120, 150, 200, 426, 660, 869, 1060, 900, 340, 429]
}]
});
});
When hovering the chart, the "point marker" is a round gray circle - I want to change that to be a round circle with a white background and green border.
Is this possible?
You can add this to your plotOptions if you want the style of the points to be the same for every series.
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
}
A working fiddle can be found here:
http://jsfiddle.net/gwdufurk/3/
If you want to have the styles of the points to be different for each series you can set the marker.states.hover attributes for each series like so:
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
},
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
// other series here.
}
See fiddle here http://jsfiddle.net/gwdufurk/4/.
You can change the color of the markers like so:
...
marker: {
fillColor: 'green',
...
Edit: Fiddle with red markers
Different Marker Color for Hover Pointer,
data: [
{ name: 'Point 1',color: '#4adefa', y: 251 },
{ name: 'Point 2',color: '#000000', y: 122 },
{ name: 'Point 3',color: '#A25429', y: 511 },
{ name: 'Point 4',color: '#AA1111', y: 524 },
{ name: 'Point 5',color: '#DF2500', y: 291 },
{ name: 'Point 6',color: '#007ACF', y: 342 },
{ name: 'Point 7',color: '#ECD66E', y: 110 },
]
See fiddle here:http://jsfiddle.net/UI_Designer/gwdufurk/5/
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.