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
- How to avoid bad behavior zooming to areas outside the data range
- Highcharts addPoint() calling in quick interval causing shape collapse of graph
- Add labels to columns in highcharts pie chart legend
- HighCharts WorlMap datalabel translation
- Highcharts dynamic (re-)sizing in AngularJS tabs
- I build synchronized charts (highcharts) that I want to export in one PDF
- Highcharts no longer animates and readjusts/rescales chart upon addition and removal of series in legend after upgrading to jQuery 1.10
- Simple bar chart in jQuery HighCharts and MVC 2 application?
- HighCharts: Variwide Column Stacked Chart
- Flexdashboards and Leaflet and marker click with Highcharts
- Creating Highcharts with Angular using Highcharts >= 5.0.0 and highcharts-ng >= 1.0.0 using a ChartFactory
- Can you pass a variable to the data property in HighCharts?
- Column Chart with condition-based coloring in R and highcharts
- Getting average or number of columns Highstock
- Highcharts stacked column chart 3 level drilldown from JSON
- Determine trend line types available in HighStock charts
- how to hide highchart x - axis data values
- angular2-highcharts error: “Chart is unknown chart type”
- Pass array from js for loop to highcharts series data
- Highstock, JSON and Android
- HighCharts Hide Series Name from the Legend
- HighCharts (HighMaps) - Function to resize
- Add Sub categories to y axis on highcharts
- How to show correctly ticks to time data in a Pie chart label using highcharts?
- Highcharts with range out of bound value highlight with different color
- Highstock- show full data sets on x axis
- Drawing a line between 2 points in line chart using Highcharts?
- Highcharts - xAxis date
- highchart treemap in R with more then 2 drilldowns makes a incorrectly nested map
- remove item from my export list highcharts