In highstocks tooltip I need to show data of the specific point.
This is how I do that:
tooltip: {
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.x) +'</b>';
s += '<br/>Time: '+ Highcharts.dateFormat('%H:%mu', this.x);
if(this.point)
{
s += "<br/>this is a flag on " + new Date(this.point.x).toDateString();
}
else
{
s += '<br/>Price: '+ this.points[0].y +' EUR';
s += '<br/>Ask: '+ this.points[0].point.ask +' EUR';
s += '<br/>Bid: '+ this.points[0].point.bid +' EUR';
console.log(this.points[0].point);
}
return s;
}
},
When hovering over a point I get more info about that specific point.
s += '<br/>Price: '+ this.points[0].y +' EUR';
s += '<br/>Ask: '+ this.points[0].point.ask +' EUR';
s += '<br/>Bid: '+ this.points[0].point.bid +' EUR';
This goes well if my zoom(rangeselector) is set on YTD or lower.
The weird thing is when I set my zoom on 1y or All, this.points[0].point. is gone. I can not find the ask and bid value that i've set.
I hope my explanation is clear.
Problem solved:
dataGrouping : {
enabled: false
}
I feel commited to answer this, as I overlooked this for a couple of hours trying to find the solution for a similar problem, even though it is answered as an edit in the question. So here is a solution:
series: [{
name: 'USD to EUR',
data: newusdeur,
dataGrouping : {
enabled: false
}
}]
Alternative:
plotOptions: {
series: {
dataGrouping : {
enabled: false
}
}
}
jsfiddle
API reference
Related
Need some help, how to show parent values with % and child values without %. Thanks in advance.
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
if(this.hasOwnProperty("drilldown")) {
return this.series.name + ", " + this.y+'%';
} else {
return this.series.name + ", " + this.y;
}
}
//format: '{point.y:.1f}'
}
},
},
We can simply check if the point has property drilldown. So we need to change your code a little bit:
if (this.point.drilldown) {
return this.series.name + ", " + this.y + '%';
} else {
return this.series.name + ", " + this.y;
}
Demo: https://jsfiddle.net/BlackLabel/obukypjn/
I have a facing problem when I have a data greater then 1000 it will make graph disturbing so I want to decrease it if it is greater the 1000 it started going to show 1k at the top of the bar in high charts
you can see it on below link
my code
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'}}, tooltip:{valueSuffix:' millions'},
plotOptions:{bar:{dataLabels:{enabled:true}}},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:'Year 1800',data:[107,31,635,203,2]},{name:'Year 1900',data:[133,156,947,408,6]},
{name:'Year 2000',data:[814,841,3714,727,31]},
{name:'Year 2016',data:[1216,1001,4436,738,40]}]});
You can preprocess your data and replace y values:
var series = [...];
series.forEach(function(s) {
s.data.forEach(function(point, i) {
if (point >= 1000) {
s.data[i] = {
y: 1000,
realValue: point
}
}
});
});
If you want to display the real values, you can store them and show in a tooltip and data labels:
Highcharts.chart('container', {
...,
tooltip: {
formatter: function(tooltip) {
if (this.point.realValue) {
return '<span style="font-size: 10px">' + this.x + '</span><br/>' +
'<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.realValue + '</b><br/>';
}
// If not null, use the default formatter
return tooltip.defaultFormatter.call(this, tooltip);
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return this.point.realValue ? this.point.realValue : this.y
}
}
}
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/18fe7yrw/
API Reference:
https://api.highcharts.com/highcharts/series.bar.dataLabels.formatter
https://api.highcharts.com/highcharts/tooltip.pointFormatter
I write a new "pointFormatter" function to show the gap between 2 points, such as jsfiddle, but when I move the mouse to the first point "7.Jan", the tooltip doesn't show correctly, and I saw errorlog in console as "TypeError: this.series.data[preIndex] is undefined"
But, when I change the timeRange to "all", then the moving mouse to the first point doesn't cause any error any more, and when I change the timeRange back to "1w", it is OK also.
What is more, if I change the point num from 10 to 9 by deleting the last point, then the error doesn't occur any more.
Why? which thing caused this error?
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{type: 'week',count: 1,text: '1w'},
{type: 'all',text: 'all'}
],
selected: 0
},
series: [{
name: 'USD',
data: [
[0,null],
[86400000,null],
[86400000*2,null],
[86400000*3,null],
[86400000*4,null],
[86400000*5,null],
[86400000*6,3],
[86400000*7,4],
[86400000*8,6],
[86400000*9,8],
]
}],
plotOptions: {
line: {
step: 'left',
connectNulls: true,
tooltip: {
pointFormatter: function () {
var preIndex = this.index - 1;
while (preIndex >= 0 && this.series.data[preIndex].y == null) {
preIndex--;
}
if (preIndex < 0) {
return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b><br/>';
} else {
var prePoint = this.series.data[preIndex];
var prePointY = prePoint.y;
var prePointX = prePoint.x;
var day = (this.x - prePointX) / 86400 / 1000;
var add = this.y - prePointY
add_str = '(' + add + ')';
return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b> ' + add_str + '<br/>';
}
}
}
}
},
});
});
Highstock has data grouping feature - more information here.
This feature can change the series.data array. Instead you can use series.options.data (original data from the options) or disable dataGrouping.
plotOptions: {
line: {
dataGrouping: {enabled: false},
example: http://jsfiddle.net/6mpt8xv2/
I have a tooltip format like this:
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%A, %b %e, %Y',new Date(this.x)) +'<br/>'+ this.series.name + ': ' + '<b>'+ this.y +'</b>';
}
};
How can I add color to my series.name because now they all black. In my chart after drawing, different series.name has different colors.
Thanks
use this:
tooltip: {
formatter: function() {
var toolTipTxt = '<b>'+ this.x +'</b>';
toolTipTxt += '<br/><span style="color:'+ this.point.series.color +'"> ' + this.point.series.name + ': ' + this.y+' </span>';
return toolTipTxt;
}
}
See the working fiddle here
If your tooltip is shared then use following code
tooltip: {
formatter: function() {
var toolTipTxt = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
toolTipTxt += '<br/><span style="color:'+ point.series.color +'"> ' + point.series.name + ': ' + point.y+'</span>';
});
return toolTipTxt;
} ,shared:true
}
See the demo of different color in tooltip for shared tooltip here
I have this chart :
I want to add a unit to the value "4" (value of my xAxis). How can I do that?
Thank you
Hard to tell because no code sent but it looks like your "4" is a series name (or some text item - not a value). To do this you can use the tooltip.formatter like in this example. I have added the "%" to the category (month) text:
tooltip: {
formatter: function() {
return 'The value for <b>'+ this.x +
'%</b> is <b>'+ this.y +'</b>';
}
}
you can do that from tooltip formatter
tooltip: {
formatter:function(){
var formattedX = "unit" + this.x;
return formattedX + 'this value ' + this.y;
}
}
I hope this will help you.
Use tooltip.headerFormat, see: http://jsfiddle.net/3bQne/647/
tooltip: {
headerFormat: '<span style="font-size: 10px">{point.key} cm</span><br/>'
},
tooltip: {
valueDecimals: 2,
valuePrefix: '$',
valueSuffix: ' USD'
}
please check the below link
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/valuedecimals/