Time on X Axis 12 hours off?

New To Observable
1

Hi all,

I’m using some dates on along the X axis and the values seem to be 12 hours off for some reason? Does anyone have any idea why this might be?

Here’s my chart and data:

image
image1085×667 52 KB

You can also view it on codesandbox.

Built from the example react demo from the Plot docs.

Thanks!

2

The step curve changes y-value at the midpoint of adjacent x-values. You can use the step-before or step-after curve if you want to change on the x-value instead. Also, you can use the dot mark to check whether the x and y coordinates that the expected value.

3

In your Plot code, you use the following to convert the string dates (“2023-07-26 15:00:00”) to dates:

 x: (d) => new Date(d["starts"])

If you call Date() with a string that is not in UTC, it assume the string represents local time, hence for me (in Pacific time), when I call
new Date("2023-07-26 15:00:00")
I get
2023-07-26T22:00Z

Given what I see in your plot, are you perhaps in a UTC+12 timezone?

1 Like
4

Turns out I’m blind, the docs on scales say to set the type of the axis to Time to use local time. Now it works fine.

I did have some difficulty getting my columns since columnX requires a band type channel, but I was able to get around it using rect.