Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Time Axis: tooltipFormat does not work #8535

Closed
robske110 opened this issue Feb 27, 2021 · 5 comments · Fixed by #8781
Closed

Time Axis: tooltipFormat does not work #8535

robske110 opened this issue Feb 27, 2021 · 5 comments · Fixed by #8781

Comments

@robske110
Copy link

robske110 commented Feb 27, 2021

Expected Behavior

tooltipFormat property of options.xAxes[0].time should change the tooltip title correctly.

Current Behavior

When tooltipFormat is specified, tooltips are not displayed and the following error is displayed in console:
Error: fromMillis requires a numerical input, but received a object with value null

Possible Solution

correctly use content of labels array

Steps to Reproduce

Create a chart with a time axis and try to use tooltipFormat.
https://jsfiddle.net/0yhmsrwf/

Context

Trying to use tooltipFormat to display a detailed timestamp at the top of the tooltip

Environment

  • Chart.js version: 2.9.4
  • Browser name and version: Safari 14.0.3 (14610.4.3.1.6)
@kurkle
Copy link
Member

kurkle commented Mar 1, 2021

Works with {x, y} or {t, y} data: https://jsfiddle.net/o2p4et87/

@robske110
Copy link
Author

Has anyone found out why this is happening? Since the workaround by @kurkle works, I assume this is because the labels array contents are not correctly correlated to the ticks.

@gusbemacbe
Copy link

gusbemacbe commented Jun 3, 2021

@robske110, @kurkle and @etimberg.

The tooltimpForm does not work yet even in the latest version. Remember I do not Node/NPM, I use the CSV and date-fns.

I used tooltipFormat to hide the unnecessary hour. Check my JSFiddle: https://jsfiddle.net/gusbemacbe/dezy7cow/4/

Try to touch one bar of the first graph due to tooltipFormat.

Observe that adapters: { locale: "pt" } inside options does not work either.

@kurkle
Copy link
Member

kurkle commented Jun 4, 2021

@gusbemacbe you are loading data from CSV, but it is transformed to a JS array, so that part is external and does not concern Chart.js in any way.

In your first chart, the tooltipFormat is incorrect for date-fns:

Uncaught RangeError: Use yyyy instead of YYYY (in dd/MM/YYYY) for formatting years to the input 1613606400000; see: https://git.io/fxCyr

After fixing that:
image

I'm not sure why you think adapters: { locale: "pt" } should work. There is an proper example on the chartjs-adapter-date-fns README:
https://github.com/chartjs/chartjs-adapter-date-fns#locale-support-via-scale-options

@gusbemacbe
Copy link

'm not sure why you think adapters: { locale: "pt" } should work. There is an proper example on the chartjs-adapter-date-fns README:
https://github.com/chartjs/chartjs-adapter-date-fns#locale-support-via-scale-options

I do not use Node or Reactjs. My JavaScript file is not a module. I also tried adapters: {date: { locale: "pt" }} inside options.

I want to translate the months names into another language.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants