score:60
You can use moment.js to get the values formatted, but Highcharts has it's own date formatting functionality which would be more idiomatic with Highcharts. It can be attached onto the tooltip option in the highcharts constructor like so:
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.x))
+ ' date, ' + this.y + ' Kg.';
}
}
You may want to also add the dateTimeLabelFormats object with the options you need for your dates, under the xAxis.
I did this example with your code
score:0
As Quy Le suggested, the built-in xDateFormat property is the way to go, but it wasn't working for me. I finally realized that my issue was in the series data where I'd assigned Date objects to my x values instead of numbers (the date in milliseconds). Instead of { x: new Date('2020-01-01'), .. }
it needed to be { x: Date.parse('2020-01-01'), .. }
. After making this change, xDateFormat did the trick. It was tough to pin down since it wasn't causing any other issues with the chart (even the reformatting of my x axis labels were working fine).
score:6
I do this:
headerFormat: '{point.x:%e %b %H:%M}'
E.g.
"tooltip": {
outside: true,
split: false,
shared: true,
useHTML: true,
headerFormat: '{point.x:%e %b %H:%M}',
pointFormat: '<p style="font-size:12px;margin:0px;padding-top:1px;padding-bottom:1px;color:{series.color};">{series.name} <strong>{point.y}</strong></p>',
valueDecimals: 2,
backgroundColor: 'black',
borderWidth: 0,
style: {
width: '150px',
padding: '0px'
},
shadow: false
},
score:15
You need to return a formatted date in the tooltip using tooltip formatter .
Here is the tooltip formatter API for your reference.
For formatting the date part, you can make use of Highcharts.dateFormat()
The format is a subset of the formats for PHP's strftime function.
You can also refer PHP's strftime
for more date formats.
I managed to format your tooltip as below.
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.x))
+ ' <br/>' + this.y + ' Kg.';
}
}
score:21
You can use {value:%Y-%m-%d}
template filter.
For an example:
headerFormat: '<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>'
score:56
You should use xDateFormat in tooltip for customizing your format date
http://api.highcharts.com/highcharts#tooltip.xDateFormat
sample:
tooltip: {
xDateFormat: '%Y-%m-%d'
},
Source: stackoverflow.com
Related Query
- customize highcharts tooltip to show datetime
- customize Highcharts tooltip on marker points and show default tooltip on the other points
- Customize tooltip and format the number to 2 decimal places of highcharts
- HighCharts show datetime format on xAxis
- highcharts customize tooltip for a single point
- Highcharts - only show tooltip when hovering directly on point
- Highcharts - show every month on datetime x-axis when the parent container is small
- Show value of last point as label or tooltip on Highcharts Stock Chart
- Show HighCharts tooltip when chart loads
- How to show only specific x-axis values on datetime axis in Highcharts
- HighCharts - Show tooltip on column where value is 0 or null
- HighCharts area graph - show tooltip only on hover of marker
- Highcharts - Show tooltip onClick instead of hover
- Highcharts - Show tooltip on points click instead mouseover
- Highcharts - how to set custom content in point tooltip (popup) on 3D scatter chart or how to customize point tooltip information?
- Highcharts changing tooltip datetime with formatter
- How To Show All Data Labels For Datetime Axis In Highcharts
- highcharts show additional custom data in tooltip
- How to edit tooltip in Highcharts C# code
- highcharts dataLabels support RTL with enable hover it for show tooltip
- Highcharts - Aligning dateTime series for shared tooltip
- how to use highcharts tooltip formatter in python code
- Why does this Highcharts graph only show tooltip for the first and last nodes?
- Show Data For Grouped Series in ToolTip Highcharts
- How to show xAxis label in tooltip in a Highcharts area chart?
- Highcharts not formatting tooltip datetime according to xDateFormat setting
- How to show values in Highcharts tooltip other than x and y when data points are too high?
- How to show other point property in bubble highcharts using tooltip
- Highcharts - Show a string category label in the tooltip for a line graph
- Highcharts - Highstock chart showing double line on hovering data points to show tooltip
More Query from same tag
- Tick position on X axis
- Highcharts/Stockcharts - display absolute value within 100%
- Highcharts error 19 issue when adjusting container width that chart displays in
- highchart bargraph rectangles remove stroke
- Change the font size and orientation of Highcharts Gantt X-axis labels
- How to connect js array to highcharts
- Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover
- Highcharts - From Servlet to JSP
- Highcharts: create multiple series using JSON data
- highcharts from HTML table does not getting the x axis key
- Is it possible update Highchart data automatically and make animated effect?
- Highcharts - Where is the location of 'back to {series.name}' in Yii2?
- javascript Highcharts JSON data to HTML table
- Align titles for multiple axis in Highstock
- style highmaps mapbubbles onclick
- Setting yaxis as logarithmic with Highcharts cakephp plugin
- How to get next point in Highcharts tooltip
- trying to draw dotted lines over the chart
- Update highstock chart dynamically
- Highcharts: Align two series horizontally to the same x-axis which are in opposite sides
- R-highcharter combine tooltips
- Passing JSON in variable to HighCharts
- Highcharts series setData from ajax php procedure
- Highchart - xAxis weekly date can start any day?
- How to read serie names from data table for the legend
- Invalid datalabels position in latest version
- Sort descendants data in categories in highcharts
- Android Highcharts DialogFragment
- Highstock - multiple plotlines value from json
- Json quotes highcharts