series: [{
name: 'name',
type: 'spline',
data: d1,
tooltip: {
pointFormat: '{series.name}: <b>{point.y:.2f}%</b>'
}
}]
d1=[0.12,-1.58,-0.8]
Show in graph 0.00,1.00,0.00
Use the Highcharts.numberFormat function in combination with the formatter function, as Ahmed Sayed noted (see http://api.highcharts.com/highcharts#Highcharts.numberFormat).
For your specific code, you would format it this way:
series: [{
name: 'name',
type: 'spline',
data: d1,
tooltip: {
// format the tooltip to return the y-axis value to two decimal places
formatter: function() {
return this.series.name + ': <b>' + Highcharts.numberFormat(this.y,2) + '%</b>';
}
}
}]
I hope this is helpful for you.
you can use formatter option instead where you provide a javascript function to return the value in the format you need
tooltip: {
formatter: function() {
return getTooltip(this.y);
}
}
Related
Hi i have to show the rank of students in highchart (spider web chart). in y axis i have to added different suffix values for different ranks (ie 1st, 2nd, 3rd, 4th.. 100th). can anyone help me on this.
thanks in advance
You can use formatter function for tooltip:
Highcharts.chart('container', {
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
tooltip: {
formatter: function() {
switch (this.x) {
case 1:
return 1 + 'st'
case 2:
return 2 + 'nd'
case 3:
return 3 + 'rd'
default:
return this.x + 'th'
}
}
}
});
Live demo: http://jsfiddle.net/BlackLabel/g48mszj9/
API: https://api.highcharts.com/highcharts/tooltip.formatter
so by reading the documents by default when you enable dataLabels on the chart it will render yAxis values, but is it possible to make it render xAxis values?
You can format labels in Highcharts in two ways:
Use dataLabels.formatter where you have access to this (point):
formatter: function () {
return this.x;
}
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/1/
Use dataLabels.format, where you can put simple template:
format: "{x}"
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/
Note:
You can use any property from a point, to show this in a label, both format and formatter can be used:
format: '{point.customValue}'
Or:
formatter: function () {
return this.point.customValue;
}
Where a point is defined as an object:
series: [{
data: [{
x: 10,
y: 15,
customValue: '10x10'
}]
}]
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/3/
Yes it's possible just add this code :
dataLabels: {
enabled: true,
formatter: function() {
return this.x;
}
},
Fiddle
I coverted all the x value with Date.parse() function
How could I get my expectation
- change x label and x value as "%Y%m%d" in tooltip
- remove the strange 12:00 empties on x-axis
Thanks
Covert function
$.each($scope.flights, function() {
var current_flight_no = this
$.each(current_flight_no.data, function(){
this.x = Date.parse(this.x);
})
});
Chart option
options: {
chart: {
type: 'scatter'
},
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e (%a)',
},
tooltip: {
formatter: function () {
return 'Extra data: <b>' + this.point.price + '</b>';
}
},
To fix the tooltip issue, use the formatter option:
formatter: function() {
return this.y + '<br />' +Highcharts.dateFormat('%Y %M %d', this.x);
},
The x values are in milliseconds, Highcharts.dateFormat(...) is needed to change milliseconds to regular date
To fix the 12:00, just go with minTickInterval
http://api.highcharts.com/highcharts#xAxis.minTickInterval
It will be great if you can share the data to better assist you.
I have this chart :
I want to add a unit to the value "4" (value of my xAxis). How can I do that?
Thank you
Hard to tell because no code sent but it looks like your "4" is a series name (or some text item - not a value). To do this you can use the tooltip.formatter like in this example. I have added the "%" to the category (month) text:
tooltip: {
formatter: function() {
return 'The value for <b>'+ this.x +
'%</b> is <b>'+ this.y +'</b>';
}
}
you can do that from tooltip formatter
tooltip: {
formatter:function(){
var formattedX = "unit" + this.x;
return formattedX + 'this value ' + this.y;
}
}
I hope this will help you.
Use tooltip.headerFormat, see: http://jsfiddle.net/3bQne/647/
tooltip: {
headerFormat: '<span style="font-size: 10px">{point.key} cm</span><br/>'
},
tooltip: {
valueDecimals: 2,
valuePrefix: '$',
valueSuffix: ' USD'
}
please check the below link
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/valuedecimals/
Is there any way to make a Dual Axis in Highstock like this one on Highcharts?
http://www.highcharts.com/demo/combo-dual-axes
It looks like you can do it the same way as in highcharts. Each series specifies yAxis:n where n is the axis you want to plot it against, and you need to define n yAxis entries. I modified one of the example highstock demos: http://jsfiddle.net/ykfmG/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data,
yAxis:i
};
}
yAxis: [{
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},{opposite:true},{opposite:true},{opposite:true}],