I'm having issues with tooltip outside in highstock, but it works perfectly fine in highcharts
I checked the docs & there doesn't seem to be a difference in config for tooltip for highstock vs highcharts.
Please find a highcharts jsfiddle:
https://jsfiddle.net/gv5szaeu/
relevant snippet
Highcharts.chart('container1', {
chart: {
type: 'column',
borderWidth: 1
},
tooltip: {
outside: true,
useHTML: true,
formatter: function() {
var s = '<table><tr><td>test<br>test<br>test<br>test<br></td></tr></table>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
return s;
},
},
});
And highstock:
https://jsfiddle.net/h45o2xwv/4
Highcharts.stockChart('container', {
tooltip: {
outside: true,
useHTML: true,
formatter: function() {
var s = '<table><tr><td>test<br>test<br>test<br>test<br></td></tr></table>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
s += '<br>test<br>test<br>test<br>';
return s;
},
},
});
Expected: tooltip: outside should work the same in both
Actual: highstock tooltip not displaying at all; highcharts tooltip displaying correctly outside of chart.
In Highstock a split option is enabled by default, so you need to disable it:
tooltip: {
split: true,
...
}
Live demo: https://jsfiddle.net/BlackLabel/46ywhxou/
API: https://api.highcharts.com/highstock/tooltip.split
Related
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 a HighStock chart (below) where I display 10-15 trends on average. I have found that the Tooltip becomes slow and too large when running so many trends on a single display. I would like to disable the tooltip, but still display the values for each trend hovered on by the crosshairs. What event do I subscribe to in HighStock to essentially move the values displayed in the tooltip to something custom?
I have attached an image of my graph with the tooltip visible and a custom legend to the left. I would like to have the hovered on values (at the crosshairs) appear next to their legend items on the left just like they do in the tooltip, disable the tooltip, but keep the crosshairs.
I have found several ways to do this using PlotOptions.Series.Point.Events.MouseOver, but that only works for one trend. How do I do it for all my trends?
It is worth noting that my code works well. The picture of the graph above is a picture of a working graph dynamically generated in MVC4 that displays beautifully on a PC/MAC/iPhone/iPad. My question ultimately needs someone proficient with HighStock to answer as they will have the intimate knowledge necessary to know what event needs to be subscribed to or what changes I need to make in order to push the data I need into a Javascript function (so I can push the crosshair values to my custom legend). It's not a question of "Is my code correct?". It's a question of "What code do I use to get the desired effect?".
But here is the code just in case it's relevant. Notice I am building a C# generic "var" and returning it via "Javascript()".
// BUILD HIGHCHARTS JAVASCRIPT
var data = #"$(function () {
$.post(""";
if (Request.ApplicationPath.ToString() == "/")
{
data += #"/HighCharts/GetData"", function (data) {";
}
else
{
data += Request.ApplicationPath.ToString() + #"/HighCharts/GetData"", function (data) {";
}
data += #"// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
events : {
load : LoadComplete
},
renderTo: 'container',
zoomType: 'x'
}, ";
data += #"colors: [ ";
foreach (var a in model.listOfSensors)
{
data += "'" + a.ColorHex.ToString() + "'";
y = y + 1;
if (y != model.listOfSensors.Count)
{
data += ",";
}
}
data += #"], ";
data += #"plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
SeriesMouseOver(this.series.name)
},
mouseOut: function () {
SeriesMouseOut(this.series.name)
}
}
}
}
},";
data += #"navigator : {
adaptToUpdatedData: false
}, ";
data += #"exporting : {
enabled: true
}, ";
data += #"rangeSelector : {
buttons: [{
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
inputStyle: {
color: '#CCCCCC',
fontFamily: 'Arial'
},
labelStyle: {
color: '#000000',
fontFamily: 'Arial',
fontWeight: 'bold'
},
selected : 3 // all
},
xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},
yAxis: [";
// BUILD SCALES
foreach (IECRM_Data_Project.Entities.Scale a in model.scales)
{
data += "{ ";
data += "min: " + a.Min.ToString() + ",";
data += "showEmpty: " + a.ShowIfEmpty.ToString().ToLower() + ",";
data += "max: " + a.Max.ToString() + ",";
data += "lineColor: '" + a.ColorHex.ToString() + "',";
data += "labels: { enabled: false }" ;
data += "}";
x = x + 1;
if (x != model.scales.Count) //ADD A COMMA AFTER EACH EXCEPT THE LAST
{
data += ",";
}
}
data += #"],
tooltip: {
pointFormat: '<span id=""{series.name}.replace(/\./g, """")"" style=""color:{series.color}"">{series.name}: {point.y}</span><br />',
useHTML: true,
valueDecimals: 1
},
series: data
});
});
});";
return JavaScript(data);
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
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