Is there any chance in the following example, get the exact position of the marker circle, with Highcharts?
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x',
panning: true,
panKey: 'shift',
scrollablePlotArea: {
minWidth: 600
}
},
title: {
text: '2017 Tour de France Stage 8: Dole - Station des Rousses'
},
subtitle: {
text: 'An annotated chart in Highcharts'
},
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 15
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 27.98,
y: 255
},
text: 'Arbois'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 45.5,
y: 611
},
text: 'Montrond'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 63,
y: 651
},
text: 'Mont-sur-Monnet'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 84,
y: 789
},
x: -10,
text: 'Bonlieu'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 129.5,
y: 382
},
text: 'Chassal'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 159,
y: 443
},
text: 'Saint-Claude'
}]
}, {
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 101.44,
y: 1026
},
x: -30,
text: 'Col de la Joux'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 138.5,
y: 748
},
text: 'Côte de Viry'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 176.4,
y: 1202
},
text: 'Montée de la Combe<br>de Laisia Les Molunes'
}]
}, {
labelOptions: {
shape: 'connector',
align: 'right',
justify: false,
crop: true,
style: {
fontSize: '0.8em',
textOutline: '1px white'
}
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 96.2,
y: 783
},
text: '6.1 km climb<br>4.6% on avg.'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 134.5,
y: 540
},
text: '7.6 km climb<br>5.2% on avg.'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 172.2,
y: 925
},
text: '11.7 km climb<br>6.4% on avg.'
}]
}],
xAxis: {
labels: {
format: '{value} km'
},
minRange: 5,
title: {
text: 'Distance'
}
},
yAxis: {
startOnTick: true,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
labels: {
format: '{value} m'
}
},
tooltip: {
headerFormat: 'Distance: {point.x:.1f} km<br>',
pointFormat: '{point.y} m a. s. l.',
shared: true
},
legend: {
enabled: false
},
series: [{
data: elevationData,
lineColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[2],
fillOpacity: 0.5,
name: 'Elevation',
marker: {
enabled: false
},
threshold: null
}]
});
What I want is that when a user clicks on the chart, get the marker circle position
It is for use with the annotations plugin, get the coordinates of that point or circle, and create a note right there
To make it clear, this point:
Line chart
I solved my problem
using the data array, and with the following code
events:{
click: function(e){
var x = e.xAxis[0].value,
y = elevationData[x.toFixed(1)*10][1];
this.addAnnotation({
xValue: x,
yValue: y,
allowDragX: false,
allowDragY: false,
title:{
text: "Hola"
} ,
shape: 'text'
});
//this.redraw();
this.redrawAnnotations();
console.log(this.annotations);
}
}
Related
Angular2-highcharts is throwing a wierd exception when I am trying to port my existing graph. The code for my graph is as shown below:-
http://jsfiddle.net/kkulig/dx2vj8k1/
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3]
}, {
data: [2, 5],
yAxis: 1
}]
});
When I try to port this to angular2-highcharts, I get a pretty bizarre error as shown below. What am I doing Wrong?
The plnkr is here http://plnkr.co/edit/UvOmYi?p=preview
The error which I see is below:-
The output of the above Plnkr is here.
This error is because of percentage issue while defining width,left,right.
angular2-highcharts is highcharts plugin for Angular is based on Typescript.
So you cannot use width: '45%', directly because it is string instead use width:window.innerWidth * .45.
http://plnkr.co/edit/Bp3O8SwWjwkLFCRkrQPa?p=preview
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: window.innerWidth * .52,
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
x: 10
}
},
yAxis: [{
left: window.innerWidth * .55,
width:window.innerWidth * .45,
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: window.innerWidth * .45,
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3]
}, {
data: [2, 5],
yAxis: 1
}]
};
I'm producing Highcharts bubble charts based on user selected data.
I'd have expected the bubbles on the charts to be proportionally sized to each other (i.e. the bubble for a '2' is consistent through multilpe charts) however, it seems to be based on the range of points on the chart.
This is highlighted in this fiddle
As you can see, the '2's in chart #2 are the same size as the '6' in chart #1.
I'd like the '2' in chart #2 to match the size of the '2' in chart #1.
Is there any way of achieving this ?
Here's the code:
jQuery(function () {
var data1 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
{ x: 1, y: 1, z: 1, label: 'data #2' },
{ x: 2, y: 2, z: 2, label: 'data #3' },
{ x: 3, y: 3, z: 3, label: 'data #4' },
{ x: 4, y: 4, z: 4, label: 'data #5' },
{ x: 5, y: 5, z: 5, label: 'data #6' },
{ x: 6, y: 6, z: 6, label: 'data #7' }];
var data2 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
{ x: 1, y: 1, z: 1, label: 'data #2' },
{ x: 2, y: 1, z: 1, label: 'data #3' },
{ x: 3, y: 2, z: 2, label: 'data #4' },
{ x: 4, y: 2, z: 2, label: 'data #5' },
{ x: 5, y: 1, z: 1, label: 'data #6' },
{ x: 6, y: 0, z: 0, label: 'data #7' }];
jQuery('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
credits: false,
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
},
yAxis: {
startOnTick: true,
min: -1,
max: 7,
showFirstLabel: false,
showLastLabel: false,
tickInterval: 1,
title: {
text: 'Score'
},
labels: {
format: '{value}'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
'<tr><th>Score:</th><td>{point.y}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{ data: data1 }]
});
jQuery('#container2').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
credits: false,
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
},
yAxis: {
startOnTick: true,
min: -1,
max: 7,
showFirstLabel: false,
showLastLabel: false,
tickInterval: 1,
title: {
text: 'Score'
},
labels: {
format: '{value}'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
'<tr><th>Score:</th><td>{point.y}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{ data: data2 }]
});
});
This is similar to what I had proposed as an answer to another bubble chart question elsewhere on Stack Overflow:
Highcharts 3.0 Bubble Chart -- Controlling bubble sizes
For your situation, it seems adding a transparent, non-interactive "dummy" bubble with the largest possible dimensions in your chart will keep each of the other bubbles in the proper proportions to one another:
series: [{ data: data2 },
// dummy series to keep all the bubbles in proportion
{name: 'dummy series',
data: [{x:6,y:6,z:6}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false}
]
Here's an updated version of your fiddle with this fix: http://jsfiddle.net/brightmatrix/svcuLgso/13/
Please let me know if this solves your issue!
The link below is the example of bubble overlapping, I want to know if I can show the data-label of the top overlapping bubble. In this case, show the label of the yellow bubble which is 'DE'.
- Example of overlapping
$(function () {
$('#container').highcharts({
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: 50, y: 50, z: 50, name: 'BE', country: 'Belgium', color:'red' },
{ x: 50, y: 51, z: 50, name: 'DE', country: 'Germany', color:'yellow' },
{ x: 100, y: 100, z: 50, name: 'DE', country: 'Germany' }]
}]
});
});
Am plotting array directly to series of my high chart.I need to show vertical lines in x-axis and horizontal bands in y axis as different colors.
Need to add vertical lines and horizontal bars according to values displayed in chart.
Here is my code:
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
},
yAxis: {
title: {
text: 'Rate'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Heart Rate',
data: data_arr
}]
});
For that, you can use chart.xAxis[0].categories.length to access the length of xAxis, and chart.xAxis[0].categories[] to access the values of xAxis' elements.
Check the following example:
$(function() {
$('#container').highcharts({
xAxis: {
categories: [10, 20, 30, 40, 50, 60, 70]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
// the button action
var hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts();
$button.click(function() {
for (i = 1; i < chart.xAxis[0].categories.length; i++) {
if (chart.xAxis[0].categories[i] > 30) {
chart.xAxis[0].addPlotLine({
value: i,
color: 'red',
width: 2,
id: 'plot-line-1'
});
}
}
});
});
To set up vertical/horizontal lines/Bands use plotBands or/and plotLines options:
For lines:
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]
For Band
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}],
You can read more here:
http://api.highcharts.com/highcharts#xAxis.plotBands
http://api.highcharts.com/highcharts#xAxis.plotLines
Check the following example jsfiddle
$(function() {
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
plotLines: [{
color: 'blue',
width: 1,
value: 1,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 2,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 3,
dashStyle: 'longdashdot',
zIndex: 3
}],
zIndex: 3,
},
yAxis: {
title: {
text: 'Rate'
},
plotBands: [{ // mark the weekend
color: '#BEE9B4',
from: 1,
to: 4
}, { // mark the weekend
color: '#EB813B',
from: 4,
to: 6
}, { // mark the weekend
color: '#E93A0F',
from: 6,
to: 8
}],
zIndex: 2,
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
type: 'spline',
name: 'Heart Rate',
data: [4, 5, 1, 2, 8, 7, 4, 1]
}]
});
});
The x-axis label disappears for a polar chart with any endAngle other than default (360)
Works without endAngle: http://jsfiddle.net/qs5v601b/1/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
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',
data: [43000, 19000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000],
pointPlacement: 'on'
}]
});
});
Does not work with endAngle : http://jsfiddle.net/qtpq84nw/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%',
endAngle: 90
},
xAxis: {
categories: ['Sales', 'Marketing'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
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',
data: [43000, 19000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000],
pointPlacement: 'on'
}]
});
});
Does anyone know what is causing this?
You need to enable showLastLabel parameter.