HubSpot UI Extensions | Issue with LineChart component: not rendering datetime correctly

Develop, Build & Integrate APIs & Integrations
1

I’m using the LineChart component in a HubSpot UI extension. My data contains Unix timestamps, but when I set fieldType: 'datetime' for the x-axis, the chart doesn’t display the date properly. I converted the timestamps to ISO 8601 format using new Date(item.Date).toISOString(), but it still doesn’t work as expected. How should I format the date for proper rendering in the LineChart?

Here is my code snippet related to LineChart axises:

 axes={{
 x: { field: 'Date', fieldType: 'datetime' },
 y: { field: 'Value', fieldType: 'category' },
 options: { groupFieldByColor: 'Breakdown' },
 }}

Here is my test data:

 const myData = [
 { Date: 1728661545534, Breakdown: 'firstname', Value: 'value x' },
 { Date: 1727957473752, Breakdown: 'firstname', Value: 'value y' },
 { Date: 1727957473752, Breakdown: 'lastname', Value: 'value z' },
 ];

and here is the error I receive:

Highcharts error #14: www.highcharts.com/errors/14/

So, is any has any clue? I want to show some string values on “Y” axis with their Date which I provided on timestamps!

Super curious to know the answer, thx!

2

Hi @MAsghari,

Happy Monday!

Thanks so much for providing all these details! Let’s check with some of our experts to see if they have experience with this topic or if they have attempted to format the date to show some string values.

Hi @Kevin-C @Teun @PatOfCle, do you have any experience here?

Thanks,
Diana

3

Hello @MAsghari ,
Thanks for your question. For charting data effectively, there has to be at least one linear axis. If you’re trying to graph which value happens when, the best thing to do is to reformat the data so that ‘value x’, ‘value y’ etc also have a ‘count’ value associated with them. You could also convert “value x, value y, value z” to numbers if they are actually numbers. We’ll take this note and find a way to be more clearer about these axes, so appreciate you bringing this up.
Please feel free to follow up with any more questions.