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/
Related
I am using high chart in my project. Currently when user mouse over on the data points the tool tip will be displayed top to the data points. Some times the data are big and the tool tip will look very big, hence user wants to display the tool tip value next to the legend title during mouse over of the data points.
Example Legends should look like below:
Female % 23 Male % 22
Here 23 and 22 are the data points value which should be printed next to legend label when we mouse over on the data points.
The 23 and 22 value should be changed as per the mouse over on the data points.
enter code here
primaryChart = $('#container').highcharts('StockChart', {
chart: {
// my code
},
yAxis: [{
// my code
}],
xAxis: {
// my code
},
plotOptions: {
// my code
},
tooltip: {
//enabled: false,
followPointer: false,
useHTML: true,
formatter: function () {
//debugger;
var precision;
var s = '<b>' + Highcharts.dateFormat('%A, %b %e %Y, %H:%M:%S', new Date(this.x)) + '</b>';
$.each(this.points, function () {
precision = GetTooltipData(this.series.options.paramID);
s += '<br/ ><span style="color:' + this.series.options.color + '">' + this.series.name + '</span> : ' + parseFloat(this.y.toFixed(precision)) + ' ' + this.series.yAxis.axisTitle.textStr;
// s += "<div class='comment_filter'><a class='comments_buble' href='#' data-series='" + this.point.index + "'>Comment</a></div>";
});
return s;
},
shared: true
},
series: chartData,
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'left',
borderColor: '#909090',
verticalAlign: 'top'
},
credits: {
enabled: false
}
});
You can use positioner function for tooltip to place it next to a legend:
tooltip: {
positioner: function() {
var legend = this.chart.legend,
x = legend.group.translateX + legend.legendWidth,
y = legend.group.translateY;
return {
x: x,
y: y
};
},
...
}
Live demo: https://jsfiddle.net/BlackLabel/3rsp4bdy/
API Reference: https://api.highcharts.com/highcharts/tooltip.positioner
enter code here
tooltip: {
followPointer: true,
useHTML: true,
split: false,
formatter: function () {
var s = '<span>' + this.series.name +'</span>';
this.series.legendItem.element.innerHTML = s;
return false;
},
shared: true,
},
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//
}
},
Please refer to http://jsfiddle.net/a6h6cLnt/. The '3m' and '1m' buttons are not working. Earlier with a smaller dataset, none of the zoom buttons were working. The url to the smaller dataset is http://jsfiddle.net/a6h6cLnt/1/
$(function () {
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT'],
// create the chart when all data is loaded
createChart = function () {
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
};
$.each(names, function (i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) {
seriesOptions[i] = {
name: name,
data: [[1346371200000,12],[1348963200000,13],[1354233600000,4],[1377907200000,12],[1380499200000,13],[1385769600000,4],[1406764800000,1],[1409443200000,15],[1412035200000,20],[1414713600000,2],[1417305600000,4]]
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
The '1m' and '3m' zoom buttons/links are not working.
Please let me know how to enable them or make them work
Regards
Joseph
You need to set minRange parameter to define minimum zoom.
Example: http://jsfiddle.net/a6h6cLnt/2/
Please look at the example. I've created on jsfiidle.
http://jsfiddle.net/cr1t/LdLn2/1/
The issue I'm having is with the tooltip that floats above the graph. The text on the column range seems to have a much higher z-index. But no matter what I try and set it on the div style sheet, it shows threw. I'd like the have the point detail in html, because I want to make it a hyperlink tag.
plotOptions: {
columnrange: {
dataLabels: {
inside: true,
enabled: true,
useHTML: true,
formatter: function () {
if (this.y === this.point.low) {
return '<div style="padding:2px;text-align:center;color:black;overflow:hidden;width:' + (this.point.plotLow - this.point.plotHigh - 4) + 'px">' + this.point.low + '°C - ' + this.point.high + '°C </div>';
}
}
}
}
},
Thanks Anto
I followed the duplicate.
I managed to get it working the way I wanted with css
http://jsfiddle.net/cr1t/LdLn2/2/
.highcharts-data-labels {
z-index: 1 !important;
}
.highcharts-tooltip span {
background-color:white;
opacity:1;
z-index:9999 !important;
padding:5px
}
.tooltip {
padding:5px
}
and setting the style on the tooltip
tooltip: {
backgroundColor: "rgba(255,255,255,1)",
style: {
padding: '1px'
},
shadow: false,
useHTML: true,
percentageDecimals: 2,
formatter: function () {
return '<div class="tooltop">'+ this.point.category + '<br />' +
'Temprature ' + this.point.low + '°C - ' + this.point.high + '°C </div>'
}
}
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