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
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 highcharts page/column chart showing all the current roles and number of employees....ie: Developer - 3, Senior Developer - 2, Master Developer-1. I am able to display tooltip information for each category just fine. What i cant do is summarize / combine that info in a tooltip.
Current tooltip code:
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><b>{point.name}</b>: {point.percentage:.1f} %',
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
When I hover over the Developer column I would like to see ONE tooltip with all the developer info in one tooltip:
John Smith - ABC123 - Developer
Karen Adams - XYZ553 - Developer
Louis Hughes - HGT123 - Developer
As opposed to 3 separate tooltips when i hover over the related column. Sorry if this is confusing :(
You need add $.each for points like this
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><b>{point.name}</b>: {point.percentage:.1f} %',
formatter: function () {
let s = "";
$.each(this.points, function () {
s += '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
return s;
}
},
This is a demo about formatter http://jsfiddle.net/viethien/ryz5c8o3/23/
You need to enable the shared option for a tooltip:
tooltip: {
shared: true
}
Live demo: https://jsfiddle.net/BlackLabel/ta4yn8L7/
API: https://api.highcharts.com/highcharts/tooltip.shared
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'm overriding the tooltip to convert from epoch time and with that I lose my color context coding for my series. it defaults to black. By default high charts adds color context with the name of the series in the tooltip.
How can I restyle so that the series name is the same color as series line?
Fiddle->http://jsfiddle.net/EwpWh/3/
tooltip: {
enabled: true,
formatter: function() {
return Highcharts.dateFormat('%A, %b %e, %Y', this.x) +
'<br/>'+ this.series.name +': <b>' + Highcharts.numberFormat(this.point.y,0) + '</b>';
}
},
Looks like the following will work:
formatter: function() {
return Highcharts.dateFormat('%A, %b %e, %Y', this.x) +
'<br/><span style="color:' + this.series.color + ' ">'+ this.series.name +'</span>: <b>' + Highcharts.numberFormat(this.point.y,0) + '</b>';
}
},
tip according to my updated point colour not series colour.
Here is my custom function:
function myFormatter() {
console.log(this);
//alert($(this.graphic.element).attr('fill'));
if(this.series.name == 'Series 2'){
return '<div style="color:Black;"><b>Target Line</b></div>';
}else if(this.series.name == 'Series 3'){
return '<div style="color:Red;"><b>Danger Line</b></div>';
}else{
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
this.x +': '+ (<?php echo round($this->targetVal,2);?> + parseInt(parseFloat(this.y).toFixed(2))) +' Kg</span>';
}
}
and tooltip is
tooltip: {
useHTML:true,
formatter: myFormatter
}
Well it is strange, because I reproduced your example in the jsfiddle http://jsfiddle.net/7Ykhx/3/
formatter: function () {
//alert($(this.graphic.element).attr('fill'));
if (this.series.name == 'Series 1') {
return '<div style="color:blue;"><b>Target Line</b></div>';
} else if (this.series.name == 'Series 2') {
return '<div style="color:red;"><b>Danger Line</b></div>';
} else {
return '<span style="color:' + this.series.color + '"><b>' + this.series.name + '</b><br/>' + this.x + ': ' + parseInt(parseFloat(this.y).toFixed(2)) + ' Kg</span>';
}
}