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.
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
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.
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/
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