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