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/
Related
I am getting special symbol in x-axis while generating chart. i am not able to figure out the issue.my actual string "Employee engagement scores of team or division of individuals after coaching".please suggest me.
My Implemented code: http://jsfiddle.net/sameekmishra/kzcxez3z/2/
Thanks,
Try this. (This is to add ellipsis inside xAxis)
xAxis: [{
labels: {
formatter: function () {
var formatted;
if (this.value.length > 35) {
formatted = this.value.substring(0, 30) + "..." + this.value.substring(this.value.length - 10);
} else {
formatted = this.value;
}
return '<div class="js-ellipse" style="width:226; overflow:hidden" title="' + this.value + '">' + formatted + '</div>';
},
style: {
width: '226'
},
useHTML: true
}
}],
Hope this helps :)
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);
}
}
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.
The issue I am having is that the tooltip on my line graph for the first few points is behind the values on the Y-Axis. I assume this is just a z-index issue between the tooltips and yaxis.
I wasnt sure the correct way to fix this issue, if there was some option I should use or is this something that needs to be addressed CSS.
This issue did not start happening until I changed the yaxis to use HTML. Maybe is it caused by my formatting?
yAxis: {
labels: {
useHTML:true,
formatter: function() {
var amount = this.value;
if(this.value > 0 ){
return '<span class="format_positive">' + amount + '</span>';
} else {
return '<span class="format_negative">' + '(' + amount + ')' + '</span>'
}
}},
alternateGridColor: '#F5F5F5',
minorTickInterval: 'auto',
lineWidth: 1,
tickWidth: 1,
title:{ text: 'Total Amounts'}
}
I have a Highcharts line chart and have tooltips enabled, however, I would like to change the background color of tooltip for just a single data point on the chart.
Is it possible to do so?
What I have so far
tooltip: {
formatter: function () {
return this.y;
},
backgroundColor: '#68BD49',
borderColor: '#000000',
borderWidth: '1'
},
Yes it is possible, by using HTML option and define custom parameters. Obviously you can use CSS styles / classes disable padding/margins, but in the simplest way you can achive this in this way:
tooltip: {
useHTML:true,
formatter: function() {
console.log(this);
if(this.point.customBck)
return '<div style="background-color:red;">The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
else
return '<div>The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
}
},
http://jsfiddle.net/XnLpH/1/