How to make sure that in the tooltip, "(name)" is displayed only after the value along the axis? With the current codes "(name)" is also displayed after string "Series 1:.. (name)".
Highcharts.chart('container', {
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '(name)' + '<br/>' + point.series.name + ': ' +
point.y + 'm';
}, '<b>' + this.x + '</b>');
},
shared: true
}
});
Example: https://jsfiddle.net/nsdtf7ah/
Printscreen: http://joxi.ru/Dr8501zTowVWGm
If you need (name) only after Month name then replace tooltip with :
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' + point.y + 'm';
}, '<b>' + this.x + '(name)'+ '</b>');
},
shared: true
},
https://jsfiddle.net/m4q2sh7t/
If you need 2 (name)'s each after String N then:
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' + point.y + 'm' + '(name)';
}, '<b>' + this.x+ '</b>');
},
shared: true
},
https://jsfiddle.net/m4q2sh7t/1/
Related
I have graphs that have zones. Currently if there is a null value, that null value is displayed in the tooltip with the zone color of the point before it. I want the null value to always be the color black.
For example,
The tooltip in graph 1 has all the correct information... but "Strength: null" has a green dot. I want to make this dot black because it is a null value.
Is it possible to make this happen? Thanks so much.
https://codepen.io/austeng/pen/gOppRWY
zones: [
{
value: 0.3,
color: "green"
},
{
value: 0.5,
color: "black",
},
{
color: "red"
}
]
look at this code. change AFTER point = chart.series[0].points[pointIndex]; BEFORE });
if (thisChart === Highcharts.charts[Highcharts.hoverChartIndex]) {
Highcharts.charts.forEach(function(chart) {
point = chart.series[0].points[pointIndex];
// CHANGE START
if (point.y == null) {
// set here your color for null values
result +=
'<span style="color:black' +
'">●</span> ' +
point.series.name +
": <b>" +
point.y +
"</b><br/>";
} else {
result +=
'<span style="color:' +
point.color +
'">●</span> ' +
point.series.name +
": <b>" +
point.y +
"</b><br/>";
}
// CHANGE END
});
} else {
result =
'<span style="color:' +
this.color +
'">●</span> ' +
this.series.name +
": <b>" +
this.y +
"</b><br/>";
}
I have added this functionality by defining the color point like this:
let color = point.y === null ? 'black' : point.color
and use this color variable in the result:
result +=
'<span style="color:' +
color +
'">●</span> ' +
point.series.name +
": <b>" +
point.y +
"</b><br/>";
Demo: https://jsfiddle.net/BlackLabel/7x1oc2pw/
Is that what you had in mind?
I am trying a custom tooltip to my stock chart.
Like: ( my custom tooltip formatter)
formatter: function() {
var extremes = $(element[0]).highcharts().xAxis[0].getExtremes(),
start = extremes.min,
end = extremes.max;
var toolTipObj = computeDynamicToolTip(start, end);
return ['<b>' + convertMillisToDateFormat(this.x) + '</b>'].concat(
this.points.map(function(point) {
return 'Rainfall ' + '<b>' + point.y.toFixed(2) + '<b>' +' (mm)' + '<br>'
+ 'High ' + '<b>' + toolTipObj.max.toFixed(2) + '<b>' + ' (mm)' + '<br>'
+ 'Low ' + '<b>' + toolTipObj.min.toFixed(2) + '<b>' + ' (mm)' + '<br>'
+ 'Average ' + '<b>' + toolTipObj.avg.toFixed(2) + '<b>' + ' (mm)';
})
);
},
But the formatter adds tooltip to both ohlc and volume, i want to create a separate tooltip for my volume chart, so I am not able to understand how to do that.
Any help would be appreciated.
Thanks
You can define a tooltip for a specific series and use pointFormatter to customize it:
series: [{
...
}, {
type: 'column',
...,
tooltip: {
pointFormatter: function() {
return 'some custom value'
}
}
}]
Live demo: https://jsfiddle.net/BlackLabel/za8126vr/
API Reference: https://api.highcharts.com/highstock/series.column.tooltip.pointFormatter
On the following JS Fiddle
I have created a chart with a step line.
step: true
I am trying to show the old data in tooltip when there is no data for the series. E.g. on mouse over on 1 July 2015, I have the data so the tooltip show the data. But if you move forwared the tooltip don't show any thing.
Is the HighChart support some thing like show latest old data if no data is present.
You should use the tooltip.formatter and then use loop to find points with the same x. If not exists then extract last point from step series. Simple demo: http://jsfiddle.net/vs6scfch.
tooltip: {
shared: false,
formatter: function() {
var x = this.x,
series = this.series.chart.series,
stepSeries = series[1],
lastPointStepSerie = stepSeries.points[stepSeries.points.length - 1],
each = Highcharts.each,
txt = '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b %d, %Y', this.x) + '</span><br/>';
each(series, function(s,i) {
each(s.points, function(p, j) {
if(p.x === x) {
txt += '<span style="color:' + p.color + '">\u25CF</span> ' + s.name + ': <b>' + p.y + '</b><br/>'
}
});
});
if(x > lastPointStepSerie.x) {
txt += '<span style="color:' + lastPointStepSerie.color + '">\u25CF</span> ' + stepSeries.name + ': <b>' + lastPointStepSerie.y + '</b><br/>'
}
return txt;
}
},
Tipsy is used to display a lot of text when hovering over my nodes and I'd like to make that text smaller. How do I do that?
$('.node').tipsy({
gravity: 'w',
html: true,
title: function() {
var d = this.__data__, id = d.id, inc_calls = d.inc_calls, out_calls = d.out_calls, inc_texts = d.inc_texts, out_texts = d.out_texts;
return 'Incoming Calls: ' + inc_calls + '<br/>' + 'Outgoing Calls: ' + out_calls + '<br/>' + 'Incoming Texts: ' + inc_texts + '<br/>' + 'Outgoing Texts: ' + out_texts ;
}
});
wrap the text that you are returning for title with a span which has style with font-size that you wish.. for example i have set the font size to 10 px you can reset it to a size which fits for your situation.
<span style="font-size:10px">+ your_title_text +</span>
$('.node').tipsy({
gravity: 'w',
html: true,
title: function() {
var d = this.__data__, id = d.id, inc_calls = d.inc_calls, out_calls = d.out_calls, inc_texts = d.inc_texts, out_texts = d.out_texts;
return '<span style="font-size:10px">Incoming Calls: ' + inc_calls + '<br/>' + 'Outgoing Calls: ' + out_calls + '<br/>' + 'Incoming Texts: ' + inc_texts + '<br/>' + 'Outgoing Texts: ' + out_texts + '</span>' ;
}
});
I am using tree map but the problem is my data label are not formatting properly.
As you can see the text in the last area is cropped. how can i fix this issue ?
HTML :
<div id="divHeatMap" style="width: 1300px; height: 800px"></div>
SCRIPT :
$('#divHeatMap').highcharts({
colorAxis: {
minColor: '#FA0404', // red
maxColor: '#08F718' // green
},
series: [returnJson.Series],
title: {
text: ''
},
plotOptions: {
treemap: {
// area: { cropThreshold: 500 },
dataLabels: {
// overflow: 'right',
// crop: true,
formatter: function () {
return '<b>Name : ' + this.point.name + '</b> ' +
'<br/>' +
'<b>Price : ' + this.point.CurrentPrice + '</b> ' +
'<br/>' +
'<b>Net Change : ' + this.point.NetChange + '</b>' +
'<br/><b>% Change :' + this.point.PercentageChange + '</b>' +
'<br/>' +
'<b>Value :' + this.point.value + '</b> ' +
'<br/>';
// return '$' + this.point.name
},
color: 'white'
}
}
}
});