Here i used line highcharts in my react project and in my line highchart I display tooltip, in this tooltime I have one date but this date is in timestamp format and I want to display this timestamp in date format in tooltip how it is possible in highcharts tooltip ?
tooltip: {
headerFormat: '<b>{series.name}</b>',
pointFormat: '{point.x}', // 1554422400
},
Use moment.js npm, dedicated to time and all related formats of date and time
In the pointFormatter function you can use Highcharts dateFormat method:
tooltip: {
...,
pointFormatter: function() {
return Highcharts.dateFormat('%a %d %b %H:%M:%S', this.x)
}
}
Live demo: http://jsfiddle.net/BlackLabel/oLt62kbu/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.dateFormat
https://api.highcharts.com/highcharts/tooltip.pointFormatter
Related
I have an issue where I have nested array data set consisting of [x,y] coordinates for a spline or scatter chart in rails LazyHighCharts, and the y coordinate is the date, in milliseconds, such as 1776600000000.
Is there such a thing as yDateFormat for tooltip ?
It seems logical there would be, since there is a:
tooltip: {
xDateFormat: '%Y-%m'
}
The whole idea is that when I mouse over a data point on a spline or scatter chart(I'm trying either option), the date will popup. But right now the date is popping up in a huge ms number, 1776600000000. I am not getting a fix to day.
Additionally, perhaps it would be nice to also include a pointFormat for something like:
tooltip: {
pointFromat: "Yada yada {point.y} and yadayda {point.x}"
xDateFormat: '%Y-%m'
}
Also for my y-axis settings, I have:
`chart.yAxis(title: { text: 'Yadayada'}, type: 'datetime' )
Any help appreciated. Pretty new to highcharts, and relatively newer to Rails
From Highcharts site you can use the formatter callback to return wanted date format.
Demo: https://jsfiddle.net/BlackLabel/4pf1xw02/
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.y)) +
' date';
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
Sorry for my english.
I have question about highcharts. Please help!
I have chart https://jsfiddle.net/traprap/upmvyjkt/5/
In this chart I have numbers like 0.00000057
But in chart tooltip this numbers converting to 57e-7
tooltip: {
valueDecimals: 8
}
not helping
I tried point format, formatter.. but nothing helped
What em I doing wrong?
Thank You!
To format it for a single series you can use the series.tooltip.pointFormatter (API) in combination with toFixed (API) to show the number with your chosen number of decimals. If you want to format all series you can use plotOptions.series.tooltip.pointFormatter (API) with the same function.
For example (JSFiddle):
series: [{
data: price,
tooltip: {
pointFormatter: function() {
return '<span style="color:{point.color}">\u25CF</span> '+this.series.name+': <b>'+this.y.toFixed(8)+'</b><br/>'
}
},
// ...
}]
This is essentially the default point format of:
<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>
With variables for series name and the y-value with toFixed(8) to show 8 decimals, as an example. This converts the number to a string before it is shown, preventing the scientific notation.
I am using highchart.js to display graph of check-in time and check-out time of employee in a month.
X-axis will be the day of month.
Y-axis is the hour-time of the day.
I want to customize the tooltip to be like
Check In
5 Aug: 09:40 am
or
Check Out
5 Aug: 09:40 am
For some weird reason, it only display the default format x and y.
The code is here:
http://jsfiddle.net/BFnL9/1/
Is there any bug here.
Your tooltip definition is fine, but it is in the wrong place. Try putting it at the same level as plotOptions instead of inside.
tooltip: {
crosshairs: true,
formatter: function(){
// THIS FUNCTION DOESNT RUN ??????????
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%e %b', this.x) +': '+ Highcharts.dateFormat('%H %M', this.y) ;
}
// headerFormat: '<b>{series.name}</b><br>',
// pointFormat: 'Day {point.x}, Time: {point.y}'
},
http://jsfiddle.net/JpMnF/
This is how the chart looks like at the moment:
http://jsfiddle.net/VunVq/1/
On the x axis instead displaying the full date, I just want to display year.
e.g 2008 2009 2010
The tooltip should display the full date though.
xAxis: {
categories: ['2008-03-31', '2009-03-31', '2010-03-31']
},
I read the api reference but cannot figure out how to display only year in x axis, maybe because its past my bedtime and my mind is not working.
Use the label's formatter callback JavaScript function to format the label.
xAxis: {
categories: ['2008-03-31', '2009-03-31', '2010-03-31'],
labels: {
formatter: function () {
return this.value.split('-')[0];
}
}
}
DEMO
You can also set type xaxis as datetime (http://api.highcharts.com/highcharts#xAxis.type) and use pointStart() / pointInterval for series.
I am using Highcharts graph to display a pie chart. I want to change the tooltip to display the actual data field along with the series name in place of the percentage value.
Here is the sample at jsFiddle
If you check the above sample you will find 2 things
Tooltip is : pointFormat: '{series.name}: {point.percentage}%' i.e.
Browser share: some-percentage-value
I want to show:
Browser share: 40 (data value instead of percentage)
2. Next is the the display text for each section in the pie. One can see n number of decimals making the graph look very ugly.
I want to show numbers only upto 2 decimal points like percentageDecimals: 1 used in tooltip.
I tried few things for 1st like series.data which returns an array of objects. Also series.data[0]. But no success so far
How can I do both these things?
You can use Format Strings to help you format numbers and dates.
x Decimal Places
View the JSFiddle
// point.percentage = 29.9345816
pointFormat: '{point.percentage:.0f}%' // returns: `30%` - (rounds to nearest)
pointFormat: '{point.percentage:.1f}%' // returns: `29.9%`
pointFormat: '{point.percentage:.2f}%' // returns: `29.93%`
pointFormat: '{point.percentage:.3f}%' // returns: `29.935%`
Thousands separator
View the JSFiddle
// point.percentage = 1029.9
{point.percentage:,.0f} // returns: `1,030`
{point.percentage:,.1f} // returns: `1,029.9`
Read More in the documentation:
Documentation: http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
You can change it so it shows the data value instead by modifying your tooltip pointFormat from pointFormat: '{series.name}: <b>{point.percentage}%</b>', to pointFormat: '{series.name}: <b>{point.y}%</b>',
You can round the numbers by using the Highcharts.numberFormat() function like so in your formatter:
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}
Here is a detailed description about tooltip formatter http://api.highcharts.com/highcharts#tooltip.formatter
this.point (not shared) / this.points[i].point (shared)
And try this.points[i].point if this.point didn't work
Simplest approach to show the actual data values is to omit the formatter function. The tooltip will default to show the actual data.