I use Highchart to draw some charts. I use this format in tooltip of highchart:
tooltip: {
crosshairs: [true, true],
shared: true,
useHTML: true,
formatter: function() {
var s = [];
s.push('<table><tr><td style="text-align:right;" colspan="3"><b>' +
this.x + '</b></td></tr>');
$.each(this.points, function(i, point) {
s.push('<tr><td style="text-align: right;">'+
'<b><span style="color:'+point.series.color +'">\u25CF</span></b>'+
'</td>'+
'<td style="text-align: right;"><b>'+point.series.name +' : </b></td>'+
'<td><b>' + point.y+'</b></td>'+
'</tr>');
});
s.push('<tr><td style="text-align:right;" colspan="3"><b>تعداد خبر : ' +
this.points[0].point.NumberNews + '</b></td></tr></table>');
return s;
}
},
The result is same :
My question is: Why top of this tool-tip print some commas?
How can I delete those?
thanks
You are returning an array. The formatter expects a string to be returned. It seems to print the separator commas from the array entries.
You have the code:
var s = [];
// ...
return s;
Instead you could do (JSFiddle):
var s = [];
// ...
return s.join('');
This just concatenates the array entries with no separator sign.
This is the default string separator for returning array.
tooltip: {
crosshairs: [true, true],
shared: true,
useHTML: true,
formatter: function() {
var s = [];
s.push('<table><tr><td style="text-align:right;" colspan="3"><b>' +
this.x + '</b></td></tr>');
$.each(this.points, function(i, point) {
s.push('<tr><td style="text-align: right;">'+
'<b><span style="color:'+point.series.color +'">\u25CF</span></b>'+
'</td>'+
'<td style="text-align: right;"><b>'+point.series.name +' : </b></td>'+
'<td><b>' + point.y+'</b></td>'+
'</tr>');
});
s.push('<tr><td style="text-align:right;" colspan="3"><b>تعداد خبر : ' +
this.points[0].point.NumberNews + '</b></td></tr></table>');
return s.join(''); //This will removed comma's, if you want to put an string separator just insert it inside the return//
}
},
Related
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 am using this code to display a shared tooltip:
tooltip: {
crosshairs: true,
shared: true,
headerFormat: 'KW {point.key}<table>',
pointFormat: '<tr><td style=\"color: {series.color}\">{series.name}: <b></td><td>{point.y} USD</b></td></tr>',
useHTML: true,
footerFormat: '</table>',
valueDecimals: 2
},
Now i like to add all point.y values as a total value of the point. But how can i loop the point.y of each series to calculate the total value?
Excatly, see example: http://jsfiddle.net/65bpvudh/7/
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>',
sum = 0;
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y +'m';
sum += point.y;
});
s += '<br/>Sum: '+sum
return s;
},
shared: true
},
Use the footerFormat property (since version 2.2) with {point.total} to easily show the total without having to re-define the complete formatter function:
tooltip: {
footerFormat: 'Sum: <b>{point.total}</b>',
shared: true,
},
More easy, use total property of point:
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+ point.y;
});
s += '<br/>Total: '+ this.points[0].total
return s;
},
shared: true
},
Check this reference
I have created a graph using high charts.
The tooltip works fine in FF and IE but in chorme the text goes out of the frame.
I tried using HTML
tooltip:
{
//Tried this also
/* formatter: function()
{
return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y;
}, */
useHTML: true,
formatter: function() {
var html="<div style='width:140px;text-align:center; direction:ltr'>"+
Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y+
"</div>";
return html;
}
},
Answer from Highcharts.com:
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
Fiddle Here
What exactly do you need?
For example, this creates a shared tooltip with values aligned to right:
tooltip: {
shared: true,
useHTML: true,
formatter: function()
{
tooltip_html = Highcharts.dateFormat('%H:%M:%S', this.x * 1000);
tooltip_html += "<table>";
this.points.forEach(function(entry)
{
tooltip_html += '<tr><td style="font-weight:bold; color:'+ entry.series.color +'">'+ entry.series.name +':</td><td style="text-align: right"> '+entry.y+'</td></tr>';
});
tooltip_html += "</table>";
return tooltip_html;
}
},
DEMO: http://jsfiddle.net/babca/4NuTx/1/
I am using Highcharts and i want to use a different formatter for the numbers displayed in the tooltip, for each curve in the same graphic.
Thank you
First of all you have to store your series tooltip text. You can do it using the following example:
.
.
.
series: [{
'name': 'serie 1',
'data': serieData, // use your array of data
'tooltipText': 'text 1' // text which will be inside the tooltip
}]
.
.
.
Then you have to get your tooltip text inside the serie tooltip.
Not shared tooltip:
tooltip: {
shared: false,
formatter: function() {
return this.series.options.tooltipText + '<br>' + // return stored text
'Value: ' + this.y;
}
}
demo1
Shared tooltip:
tooltip: {
formatter: function() {
var tooltip = '';
for(var i = 0, length = this.points.length; i < length; i++) {
var point = this.points[i];
tooltip += point.series.options.tooltipText + '<br>' +
'Value: ' + point.y + '<br>';
}
return tooltip;
}
}
demo2