Chart.js can not display Date as Label

[boston85719]

I am using some javascript in workflows and an html element to draw a bar chart. It uses the Chart.js library

When I use the dates associated with my data for the labels, the dates are interpreted by the chart as numbers and performs math…so for example if I am showing a month followed by day as 10-14, the date is returned and displayed as a label of -4

Here are some screen shots of the charts as they are drawn

On the left side the “Dates List” are the dates used as labels in the chart on the Vertical Axes. The “Dates List” is actually coming from a custom state I created as a list of texts and I send the information through by formatting the dates like below

I did this because I was experiencing these issues when using the dates in the javascript for drawing the charts and thought that if I formatted the dates which turns it into a text data type, the chart would recognize it as a text and not have this issue, but that did not work.

I then looked at the Chart.js documentation concerning time

https://www.chartjs.org/docs/latest/axes/cartesian/time.html

and attempted to implement the axes time type but that causes the chart to not be drawn, and oddly enough it does not cause an error message in the debugger.

What is strange is that when I send a date into the javascript for the chart I get an error code in the debugger. This leads me to believe that when I am using the time type in the axes and no error code is shown in the debugger, there is not an error, but for some unknown reason to me the chart is not being drawn.

Below is part of the Javascript I am using

When I try to add the time type the javascript looks like this

This does not produce an error message in the debugger so it seems the code is fine, however the chart does not get drawn.

Does anybody have experience with Chart.js and have used dates as labels? I have spent hours trying to find a solution to this with no luck.

[boston85719]

So, again, my OCD causes me to fuddle around for way too long, but I eventually find the solution.

Apparently in Chart.js there are a few different versions of what is known as cartesian axes…

Cartesian Axes | Chart.js

one is time, which is where I spent most of my time messing about with failure after failure.

Another is category, which only requires the label in the javascript to have a quotation mark around it as opposed to a numeric value which doesn’t require a quotation mark. The reason why I had the issues with dates such as 10-14 showing a label of -4 is that it was interpreted as a numeric value as I assumed. So I needed to change it to be a ‘category’ which allows for text values to be displayed.

I got the labels set up correctly and now my chart shows the dates as I formatted

The main issue was not in the yAxes scales, but the labels themselves as I have them in the globalsettings

So now I have things displaying as I would like and can finally move forward.

[alex4]

@boston85719

So, again, my OCD causes me to fuddle around for way too long, but I eventually find the solution. Apparently in Chart.js there are a few different versions of what is known as cartesian axes… one is time, which is where I spent most of my time messing about with failure after failure. Another …

Hey @boston85719 – I also added a time series on my charts (but just for the X-Axis on for Scatter Charts with connected points (under the charts “Visits over Time”).

Curious to learn – what is your use case for having dates on the Y-Axis?

[jared.gibb]

These axis are switched though aren’t they. It’s a horizontal bar chart?

[boston85719]

Yes it is a stacked horizontal chart. @alex4 it was really just a way I wanted to show the data as a stacked horizontal chart.