Skip to content
Advertisement

Chart.js- Dates not displaying correctly on chart and axis labels not showing

I’m trying to label my axes on my chart. I’m using chart.js v3.9.1 and I believe I’ve followed the documentation, however the labels aren’t showing up (see below):enter image description here

health_hub_tracker.html:

JavaScript

views.py:

JavaScript

You will also see that on my x axis- the dates are coming through as a sum.

The data I have are: [‘2022-10-09’, ‘2022-10-09’, ‘2022-10-05’, ‘2022-10-05’, ‘2022-10-05’]

so it is literally calculating 2022-10-09 to give 2003 and so on. What am I missing here? I would like to display the date as a string, as per the list of data I’m getting in my view.

Any help would be much appreciated!

Advertisement

Answer

The problem here seems to be the lack of string delimiters around your dates.

The labels property without the delimiters ends up being something like this in your generated HTML.

JavaScript

JS processor, upon seeing 2022-10-09 assumes you want to calculate the result of subtracting 10 and 9 from 2022.

What you want to end up with is

JavaScript

and for that you have to change your labels iteration code to something like this (I’m not really familiar with Python or Django, but you get the idea 😉 )

JavaScript
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement