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
Related
Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
I am using Highstock chart with range selector and as well as data grouping it is working fine, but facing issue with custom tooltips in highstock chart(I am able to generate custom tooltip in highchart, but this is not wotking in highstock). Please, anyone, help me with this.
You can create a custom tooltip in Highstock in the same way as in Highcharts:
tooltip: {
formatter: function() {
return 'Custom tooltip: x: ' + this.x + ' y: ' + this.y;
}
}
Live demo: https://jsfiddle.net/BlackLabel/q7undao5/1/
API Refernce: https://api.highcharts.com/highstock/tooltip.formatter
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
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/