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
Related
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.
Trying to attach additional data to series tooltip using tooltip.formatter
There data for series looks like that:
series: [{
name: 'Series 1',
data: [{ x:Math.rand(), label: "Test Label1"},
{ x:Math.rand(), label: "Test Label2"},
{ x:Math.rand(), label: "Test Label3"}
]
}]
And formatter:
tooltip: {
shared: true,
formatter: function() {
var result = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function(i, datum) {
result += '<br />' + datum.point.label;
});
return result;
}
}
The problem is highchart expose additional fields in formatter function only if dots count in series doesn't trespass some threshold. Experimentally I found that it works for less than approximately 250 dots and depends on chart configuration.
Seems there is some internal throttling, but I cannot find any mentions of it in documentation.
There is example demonstrating an issue with 2 charts similar charts,but different series cardinality: 250 and 500 dots respectively - http://jsfiddle.net/k5exP/68/
It is related with the fact that in the highstock you have enabled datagrouping, defaulty. It causes tht points are approximated and custom parameters are skipped.
I have set up a jsfiddle example http://jsfiddle.net/FQjuY/1/
I'm formatting 1D tab using the following code snippet
var df='%a, %b %e %I:%M %p';
tooltip : {
formatter : function(){
var s=Highcharts.dateFormat(df, this.x);
s+="<br/>";
$.each(this.points, function(i, series){
s += '<span style="color:' + this.series.color + '">' + this.series.name + '</span> : <b>'+ this.y.toFixed(2) +'</b><br/>';
});
return s;
}
}
I want to dynamically change the date format for 1H and ALL tabs separately when i click on the tab. Thanks in advance.
You can get selected button via:
var selected = this.points[0].series.chart.rangeSelector.selected;
Then if you will define df that way:
var df=['%I:%M %p','%a, %b %e %I:%M %p','%a, %b %e'];
You can simply get required tooltip format:
var s=Highcharts.dateFormat(df[selected], this.x);
See: http://jsfiddle.net/FQjuY/2/
Another solution is to just get range from:
var range = this.points[0].series.points[1].x - this.points[0].series.points[0].x
And now according to range use specific format for date.
Hi I'm using the following example:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setcompare/
How do I a change format of the values on the y-axis. For example when I choose percentage i want the values to be displayed as +25%. I now how to initially set up this up but how do I change it with Jquery script.
formatter: function () {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
/S
If you use formatter in the tooltip, you should have this.y instead of this.value.
formatter: function() {
return (this.y > 0 ? '+' : '') + this.y;
}
http://jsfiddle.net/6neGD/1/
I solved it. Just use
chart.options.yAxis[0].labels.format = '{value} %';
to display label as percentage
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