Area Chart Issues

Noticed with the Area Chart that despite the date being set to the exact date, the column itself displays the date incorrectly (as the day before to be exact). The text under the column is correct though. This same issue also occurs on the line chart.

Also noticed it is not showing multiple values with the same timestamp.
(IE: two entries on same timestamp do not both show, it only shows the first one in the array as opposed to showing both or combining the values of the two).

Timestamp in the object: "2020-01-14T00:00:00Z"

Noticing same issues with DataGrid object. Verified timestamp is in the same format as above but is still being displayed as the day before.

Hi @Damian,

There was a similar issue with the chart that should have been fixed some time ago.

There is no such known issue with the DataGrid though. We have a utcDate Angular pipe that takes care of timezone conversion issues.

If you have a Radzen Professional subscription you can send us your application to and we would troubleshoot.

Interestingly enough, that is actually the same exact issue and same application in the post you linked. I will just double check the application and if I can't fix the issue on our end, I will look into sending the application to you guys.

Thanks for the quick response!

As for the issue with the DataGrid, despite the two objects having the same value, they are both displayed differently. Seems to potentially relate to the issue with the charts. Only thing is we do "${data.HireDate | date}" on the DataGrid HireDate column, though that should not format it to the day prior.

Picture: image

You can try using ${data.HireDate | utcDate} - it should display the date properly.

Hey Korchev,

That did indeed fix the Hire Date issue. Though I still am not able to have the same results in fixing the Area Chart issues. Have you guys been able to reproduce this issue?

Does changing the ChartType to Bar or Column address the issue?

The date object itself is matched to 1/16/2020 but the graphs render as such:

Bar Graph: image
Both the bar itself and the text under it shows the date before it

Column Graph: image
Just the column shows the date before it

It is also worth noting neither of them combine like entries so if I have two entries at the same timestamp with 2 different hours, they are both rendered on top of one another. Ideally they should be combined or distinguishable by different colors or different columns entirely.
Example here: image

Also checked the line and area charts, the issue seems to occur on those charts as well. Though on the line and area charts the multiple entries are not rendered at all, just the first.

This is strange as the issue in the original thread should have been fixed long ago - at least I can no longer reproduce it with the original data. Which Radzen version are you using? Also do you have a custom client\node_modules directory?

The grouping behavior of the Chart is beyond our control unfortunately. It won't merge dates as you request.

Currently I am running Radzen 2.42.4. I have not modified the node_modules directory at all. Understandable, I will have to look into a workaround for the merging dates issue.

As for the date rendering bug, what do you think could be the cause of this? The date being rendered correctly in one spot but not the other is quite odd behavior.

I just tested with the following data:

[ { value: 1, category: "2020-01-14T00:00:00Z" }, { value: 2, category: "2020-01-15T00:00:00Z" } ]

The chart is configured like this:

Here is what I see:

Does the attached application work as expected at your side? Unzip the file somewhere and then import in Radzen.

Issue does still seem to occur with the project provided: image

I see what you mean. The tooltip is not the same as the label in the axis. We will try to address that.

Perfect. It is worth noting that the only table that renders the axis properly is the column
graph. All other graphs renders both the tooltip and the axis as the date before.

Sorry I didn't get that. What do you mean by only table renders the axis properly? How are the other charts different than the ones that render the axis properly?

In the project provided, the axis of the column chart is labeled as 1/14/2020 and 1/15/2020 respectively, as that is how it is stored in the data. When switching the chart type to line, area, or bar it shows the axis as 1/13/2020 and 1/14/2020 instead of what the data shows.

Example with bar graph: image

It seems only the column chart labels the axis properly though it still labels the tooltip incorrectly.

Got it. Will take care of this as well.