I created a sunburst chart with highcharts. I set the config object given to Highcharts.chart('type', config) in python. I want to have one different tooltip for each level of the sunburst chart.
I can do a big js function that search the level of the point in my data then give the level to the tooltip formatter to display the specific data, but that is not suitable I think.
Is there any highcharts function to get the point's level or to define the tooltip in series.levels[]?
You could get this based upon the slice's level property. You can do something like:
tooltip: {
formatter: function () {
console.log(this); // see what each slice's properties are
if (this.point.node.level == 4) {
return 'Population of <b>' + this.point.options.name +
'</b> is <b>' + this.point.options.value + '</b>';
} else {
return 'Level <b>' + this.point.node.level + '</b> has no tooltip';
}
}
}
Example jsFiddle
Tank you for your answer wergled. In fact what help me is the console.log(this)! I don't know why but this refers directly to the point in my code. And since I code in python, I have to format a js function into a python string, this is quite difficult.
So I ended with something like:
config['tooltip']['pointFormatter'] = (
"function(){"
"var level = this.node.level;"
"return"
f" {myValues}[level] + '<span style=\"text-transform: uppercase;font-weight:bold\">{myPythonVar}:</span> '"
f"+ {myJsFormatter}.call(this) + '<br>'"
"}"
)
It mixes python and js, it hard to read but needed in my case.
Related
The question is simple: How can i remove the date from line tooltip in the graph?
Use the tooltip formatter (documenation)
tooltip: {
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
}
},
You can also set the tooltip.headFormat to the empty string '' which disables the tooltip header (which displays the data).
API: https://api.highcharts.com/highcharts/tooltip.headerFormat
Im using Stacked area chart of nvd3-angularjs
This is my html
<div ng-controller="Eth2GraphController">
<nvd3-stacked-area-chart
data="GraphData"
noData="No Data For You!"
id="eth2Graphs"
showXAxis="true"
showYAxis="true"
showLegend="true"
interactive="true"
tooltips="true"
objectEquality="true"
margin="{left:100,right:100}"
useInteractiveGuideline="true"
tooltipcontent="toolTipContentFunction()"
xAxisTickFormat="xAxisTickFormatFunction()"
yAxisTickFormat="yAxisTickFormatFunction()"
color="colorFunction()"
legendColor="colorFunction()"
>
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Now, I have a function that should format the tooltipcontent, but its not working. Maybe it has something to do with the useInteractiveGuideline attribute. I used the same tooltipcontent function to edit the tooltip of my other charts, its working on those charts the only difference is that those chart dont use useInteractiveGuideline.
$scope.toolTipContentFunction = function() {
return function(key, x, y, e, graph) {
return '<h3>' + x + '</h3>' +
'<p>' + key + ' ' + y + '</p>';
}
};
I want x to be in the center, and other formatting for the data. How would I do that? Am I using the correct attribute that would format the tooltip?
Change tooltipcontent="toolTipContentFunction()" to:
tooltipContent="toolTipContentFunction"
useInteractiveGuideline must be set to false for the tooltipContent to work. I believe it is because useInteractiveGuideline uses it's own popup.
Highcharts does a great job auto-formatting dates both on the x-axis and in tooltips. Unfortunately I need a custom function to format my y-values, and /plotOptions/line/tooltip/pointFormat accepts only a format string and not a function, so I have to set /tooltip/formatter instead. How do I get hold of the formatted date (e.g. Oct'13 or 20. Oct) as shown on the x axis? I don't seem to have access to point.key from there, only the raw millis value.
http://jsfiddle.net/9Fke4/
You can use dateFormat()
tooltip: {
formatter: function() {
return '<b>' + Highcharts.dateFormat('%b\' %d',this.x) + ':</b> ' + this.y;
}
},
http://jsfiddle.net/9Fke4/1/
FWIW, this was answered in a Highcharts issue on Github
formatter: function() {
var tooltip = this.series.chart.tooltip,
item = this.point.getLabelConfig(),
header = this.series.chart.tooltip.tooltipFooterHeaderFormatter(item);
return header + this.y;
}
Corresponding fiddle:
http://jsfiddle.net/9Fke4/12/
If you are using a shared series:
tooltip: {
formatter: function (tooltip) {
var header,
s = [];
$.each(this.points, function(i, point) {
if(header == null) {
var config = point.point.getLabelConfig();
header = tooltip.tooltipFooterHeaderFormatter(config);
}
s.push(point.y);
});
return header + s.reverse().join('<br>');
},
shared: true
}
conver the raw milliseconds to a date object using
var currentDate = new Date (tome in milliseconds)
in the tootip/formatter function you have defined.
this will give you good control over the date. you can use currentDate.getMonth(), getDate(), getDay(), etc methods to get the information you want from that date.
build a string with the above info and return.
I hope this will help you.
The solution I ended up with is to pre-format the y-values and store them as part of the series data; the pre-formatted values can then be referenced from the tooltip headerFormat and pointFormat, where they can be used along with {point.key}, which contains the auto-formatted date (and which is not available when providing a custom tooltip formatter):
http://jsfiddle.net/uG3sv/
Is there a more efficient way for displaying a tool tip once a cell is hovered? Using the structure attribute to format the datagrid, is there a way to use formatter to display a dijit toolTip rather than using the html title attribute.
Here is the column in which the toolTip is displaying.
var subscriberGridLayout = [
{
name: " ",
field: "ExpirationDate",
formatter: function(value){
if(value){
expDate = formatDateIE(value);
return toolTip();
}
else
return " ";
},
styles: "text-align: center;",
width: "30px"
},
Here is the function that displays a tooltip icon through the image tag but instead of a dijit toolTip it simply uses html's title to display a popup.
function toolTip(){
src = "'/Subscriber/resources/images/icons/icon_error.gif'/>";
if(dojo.date.difference(today, expDate) <= 0 ){
message = "Credential expired.";
return "<img title='"+ message + "' src=" + src + "";
} else if(dojo.date.difference(today, expDate) <= 60) {
message = "This Subscriber will expire in " + dojo.date.difference(today, expDate) + " days."
+ "
To prevent an interruption in the Subscriber’s access, please sumbit a request to " +
"renew the Subscriber within 30 days of the expiration date.";
return "<img title='"+ message + "' src=" + src + "";
} else {
return " ";
}
}
I would do something like:
new Tooltip({
connectId: grid.domNode,
selector: "td",
getContent: function(matchedNode){
return matchedNode.innerText
}
});
With grid.domNode you can get the generated DOM of your widget. A grid generates a table-structure, so you can get the cells by using the selector and getContent properties.
I must say it's not really the correct way to do it because now you're playing with the internal structure of the Dojo widget. If they once decide not to use a table as DOM structure your code won't work.
But I don't think there is a better way to achieve this, in the end you will always have to translate the Dojo cell to a DOM node (because tooltips are DOM based). You can of course connect a tooltip to each cell, but I tried that before and it was a little buggy (sometimes the tooltip didn't pop up).
I also made a JSFiddle to show you a working example.
I can't find the settings for my problem in the Highchart API.
I've cerated an example on jsFiddle http://jsfiddle.net/qErT2/
How can I swap 1,000 into 1000 ??
Greetings
HighChart number format is the same like PHP NUMBER FORMATS
you can use this format any where
for tooltip
tooltip: {
formatter: function ()
{
return '<b>' + this.series.name + '</b><br/>' + this.x + ' - <b>' + Highcharts.numberFormat(this.y, 0,'',''); + '</b>';
}
}
for yAxis
yAxis: {
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0,'','');
}
}
},
YOUR EXAMPLE MODIFIED DEMO (tooltip)
AND UPDATED DEMO (tooltip and yAxis labels)
Take look at lang options http://api.highcharts.com/highcharts#lang and obviously you can use Highcharts.numberFormat() http://api.highcharts.com/highcharts#Highcharts.numberFormat() which can be used in tooltip formater / label formatter to display numbers as you need.
http://api.highcharts.com/highcharts#yAxis.labels.formatter