# Datetime formatting issue on APEX charts for .CSV downloads

**URL:** <https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170>\
**Category:** Ignition\
**Tags:** python, ignition81, perspective, scripting\
**Created:** [November 27, 2024, 8:44am UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170 "2024-11-27T08:44:04Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sabhareeswaran\_Ravi](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@Sabhareeswaran\_Ravi](https://forum.inductiveautomation.com/u/Sabhareeswaran_Ravi)\
**Post date:** [November 27, 2024, 8:44am UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/1 "2024-11-27T08:44:04Z")

</div>

I’m facing an issue with the APEX Line Chart (V1.0.18) regarding data export. Despite configuring the `categoryFormatter` option as per the [APEX documentation](https://apexcharts.com/docs/options/chart/toolbar/), the exported `.csv` file does not reflect the desired date format.  
Current Export Format: Dates are formatted using `.toDateString()` (e.g., `Tue Nov 26 2024`).  
Expected Export Format: I need the format `dd/mm/yyyy HH:mm:ss` in the `.csv` file.

Configured `categoryFormatter` in the chart options to format the date as `dd/mm/yyyy HH:mm:ss`.

```python
{return new Date(x).toLocaleTimeString()} 

```

or

```python
{return new Date(x).toLocaleDateString()}

```

However, the `.csv` export still defaults to `.toDateString()`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/9/891b0632f0837d91176853444ed29dd4fb6fb469.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/8/182e6c12948bf0cf84be9f6741860f9920b66032.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 27, 2024, 3:48pm UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/2 "2024-11-27T15:48:25Z")

</div>

The apex docs show that the translation expects a function.

The module docs says you have to define a function like this. so you will need to do it like that.

> **[GitHub - Kyvis-Labs/ignition-apexcharts-module: The module provides Perspective ApexCharts...](https://github.com/Kyvis-Labs/ignition-apexcharts-module?tab=readme-ov-file#user-defined-functions)**
>
> The module provides Perspective ApexCharts components

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21fac6addb1d2c1298acbce1081de0b15fc606cf.png)

(If this is the module you are using ofc)

---

<div class="post-metadata">

**Author:** ![Sabhareeswaran\_Ravi](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@Sabhareeswaran\_Ravi](https://forum.inductiveautomation.com/u/Sabhareeswaran_Ravi)\
**Post date:** [November 28, 2024, 9:48am UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/3 "2024-11-28T09:48:52Z")

</div>

Thanks for the docs but unfortunately it is not working.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 28, 2024, 9:54am UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/4 "2024-11-28T09:54:46Z")

</div>

show me how you setup the function

---

<div class="post-metadata">

**Author:** ![Sabhareeswaran\_Ravi](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@Sabhareeswaran\_Ravi](https://forum.inductiveautomation.com/u/Sabhareeswaran_Ravi)\
**Post date:** [November 28, 2024, 10:34am UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/5 "2024-11-28T10:34:45Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/e/3e762086f4632190056d5555d88f06319f1724bb.png)

I tried to format the Y value to check whether the function is working.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 28, 2024, 10:41am UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/6 "2024-11-28T10:41:22Z")

</div>

It seems you are misunderstanding what is happening.  
The docs ofc the perspective module showed only a sample. The fuction in the does not work on a different property.

for your csv properties the function should probably follow this:

```python
valueFormatter : function (y) { return y }
categoryFormatter: function (x) { return new Date(x).toDateString() }

```

However note that for dates this might be different, since it seems igntion might send the formated date as X which might need a more elaborate new Date function to parse the string to a valid date object.

For debugging purposes i wonder if you see something inthe inspector log in the browser if you put in some logging.

```python
categoryFormatter: function (x) { console.log(x); return new Date(x).toDateString() }

```

disclaimer i dont have the module, but i know something about javascript:)

---

<div class="post-metadata">

**Author:** ![Sabhareeswaran\_Ravi](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@Sabhareeswaran\_Ravi](https://forum.inductiveautomation.com/u/Sabhareeswaran_Ravi)\
**Post date:** [November 28, 2024, 12:50pm UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/7 "2024-11-28T12:50:33Z")

</div>

Tried this: `valueFormatter: function (y) { return y; }, categoryFormatter: function (x) { return new Date(x).toDateString(); }` earlier, but Apex is not picking up the configs, and the console.logs `function (x) { console.log(x); return new Date(x).toDateString() }` are not getting generated.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 28, 2024, 1:13pm UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/8 "2024-11-28T13:13:29Z")

</div>

than you will have to contact the module maker

---

<div class="post-metadata">

**Author:** ![mcarritt1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mcarritt1/32/4262_2.png) [@mcarritt1](https://forum.inductiveautomation.com/u/mcarritt1)\
**Post date:** [December 18, 2024, 10:16pm UTC](https://forum.inductiveautomation.com/t/datetime-formatting-issue-on-apex-charts-for-csv-downloads/99170/9 "2024-12-18T22:16:32Z")

</div>

if anyone else is having this problem:

set the options.chart.toolbar.export.csv.categoryFormatter to a JavaScript function:

```python
 function (x) {
    return new Date(x).toISOString().replace('T', ' ').slice(0, -1);
}

```

you'll get a csv like :  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/9/79496e46a127b4e1d4105f76bc40067283d94fd3.png)

you can also use toLocaleString for the users time zone:

```python
function (x) {
    return new Date(x).toLocaleString()
}

```

it should look something like this in your designer:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e59dcd879b0a355313ad6e59b085677dc6e47092.png)

finally, if you want to avoid commas in your timestamp you can do like

```python
function (x) {
    return new Date(x).toLocaleString(undefined, { hour12: false }).replace(/,/g, '');
}

```