Menu
i'm trying to create a permanent tooltip for a specific point, what do i mean by saying permanent:: i mean that it will always be showed, not only when hovered but all the time. im also open to a label being showed there but i need it to be related to that exact point and not positions by relative X-Y css positioning to the chart object since the chart width is dynamic.
examples: series: [{ name: 'Anger',
data: [{ y: 9, x: Date.UTC(2011, 10, 5), name: 'USD to EUR', marker: { symbol: 'url(sun.png)', label: '123' , sticky-tooltip:true } }]
of course this wont work, but i hope you understand what i am trying to achieve .
thanks for your help.
for those wholike to see the complete file:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
},
title: {
text: 'Emotions graph',
style: {
position: 'relative',
},
x: 20, //center,
y: 8 ,
},
subtitle: {
text: ' ',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { day: '%e. %b' },
tickInterval:24 * 3600 * 1000 * 7,
showLastLabel : true,
maxPadding:0,
minPadding:0
},
yAxis: {
max :10,
title: { text: 'Emotion level' },
},
tooltip: {
enabled:true,
formatter: function() {
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var temptime = new Date(this.x);
if (this.point.name != null ) { thename = this.point.name + '<br/>'; } else { thename ='' };
return thename + '<b>'+ this.series.name +'</b><br/>Level of: '+
this.y + '<br/>Date: ' + temptime.getDate() + ' of ' + month[temptime.getMonth() ] ;
}
},
legend: {
style: { padding: 30 },
align: 'center',
verticalAlign: 'top',
y: 15,
floating: true,
borderWidth: 0
},
credits: { enabled: false },
series: [{
name: 'Excitment',
lineWidth: 2 ,
data: [
[Date.UTC(2011, 9, 27), 7],
[Date.UTC(2011, 9, 20), 6],
[Date.UTC(2011, 9, 21), 7],
[Date.UTC(2011, 10, 2), 8],
[Date.UTC(2011, 10, 9), 6],
[Date.UTC(2011, 10, 16), 6],
[Date.UTC(2011, 10, 14), 7],
[Date.UTC(2011, 10, 1), 1],
[Date.UTC(2011, 9, 24), 2],
[Date.UTC(2011, 10, 4), 9],
[Date.UTC(2011, 10, 11), 7],
[Date.UTC(2011, 10, 15), 7],
[Date.UTC(2011, 9, 25), 6],
[Date.UTC(2011, 10, 2), 7],
[Date.UTC(2011, 10, 6), 2],
[Date.UTC(2011, 10, 13), 8],
[Date.UTC(2011, 10, 3), 1],
[Date.UTC(2011, 9, 26), 1],
[Date.UTC(2011, 10, 9), 5],
[Date.UTC(2011, 10, 12), 6]
]
},{
name: 'Tranquility',
lineWidth: 2,
data: [
[Date.UTC(2011, 10, 18), 2],
[Date.UTC(2011, 9, 26), 2],
[Date.UTC(2011, 10, 1), 4],
[Date.UTC(2011, 10, 11), 5],
[Date.UTC(2011, 9, 21), 5],
[Date.UTC(2011, 10, 12), 9],
[Date.UTC(2011, 9, 25), 5],
[Date.UTC(2011, 10, 4), 4],
[Date.UTC(2011, 10, 9), 1],
[Date.UTC(2011, 10, 13), 5],
[Date.UTC(2011, 10, 19), 6],
[Date.UTC(2011, 9, 25), 6],
[Date.UTC(2011, 9, 31), 3],
[Date.UTC(2011, 10, 7), 3]
]
}, {
name: 'Happiness',
lineWidth: 2 ,
data: [
[Date.UTC(2011, 10, 9), 5],
[Date.UTC(2011, 9, 20), 5],
[Date.UTC(2011, 9, 28), 5],
[Date.UTC(2011, 10, 12), 6],
[Date.UTC(2011, 10, 1), 5],
[Date.UTC(2011, 9, 24), 5],
[Date.UTC(2011, 9, 29), 7],
[Date.UTC(2011, 10, 18), 4],
[Date.UTC(2011, 9, 24), 9],
[Date.UTC(2011, 9, 22), 3],
[Date.UTC(2011, 9, 21), 3]
]
},{
name: 'Anger',
lineWidth: 2,
data: [
[Date.UTC(2011, 9, 28), 4],
[Date.UTC(2011, 9, 26), 2],
[Date.UTC(2011, 10, 1), 4],
[Date.UTC(2011, 10, 11), 5],
[Date.UTC(2011, 9, 25), 8],
[Date.UTC(2011, 9, 27), 3],
[Date.UTC(2011, 9, 30), 8],
[Date.UTC(2011, 9, 29), 3],
{ y: 9, x: Date.UTC(2011, 10, 5), name: 'USD to EUR', marker: { symbol: 'url(sun.png)', label: '123' } },
[Date.UTC(2011, 9, 27), 4],
[Date.UTC(2011, 10, 18), 5],
[Date.UTC(2011, 10, 13), 7],
[Date.UTC(2011, 10, 19), 6],
[Date.UTC(2011, 9, 25), 6],
[Date.UTC(2011, 10, 12), 3],
[Date.UTC(2011, 9, 26), 4]
]
},{
name: 'Average',
lineWidth: 2,
data: [
{ y: 9, x: Date.UTC(2011, 9, 31), marker: { symbol: 'url(snow.png)' } },
[Date.UTC(2011, 9, 20), 4],
[Date.UTC(2011, 9, 22), 2],
[Date.UTC(2011, 10, 20), 4],
[Date.UTC(2011, 10, 16), 5],
[Date.UTC(2011, 9, 29), 8],
[Date.UTC(2011, 9, 28), 3],
[Date.UTC(2011, 9, 29), 9],
[Date.UTC(2011, 10, 08), 7],
[Date.UTC(2011, 10, 17), 6],
[Date.UTC(2011, 9, 23), 6],
[Date.UTC(2011, 10, 12), 3],
[Date.UTC(2011, 9, 27), 4]
]
}
]
});
});
768
This is possible using the HighCharts chart.renderer() feature.
Try this JSFiddle and this JSFiddle from the HighCharts API reference. Both show how to use the Renderer to write text or a text box on the chart and anchor it to a point.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
