# Ui-chart / eCharts: valueFormatter or formatter? But how?

**URL:** <https://discourse.nodered.org/t/ui-chart-echarts-valueformatter-or-formatter-but-how/100629>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 March 2026 20:56 UTC](https://discourse.nodered.org/t/ui-chart-echarts-valueformatter-or-formatter-but-how/100629 "2026-03-22T20:56:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![metawops](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/metawops/32/105800_2.png) [@metawops](https://discourse.nodered.org/u/metawops)\
**Post date:** [22 March 2026 20:56 UTC](https://discourse.nodered.org/t/ui-chart-echarts-valueformatter-or-formatter-but-how/100629/1 "2026-03-22T20:56:37Z")

</div>

Hello guys,

in my current little hobby project I'm (amongst other astronomical things) visualising the day length for certain locations. Here's how the chart currently looks like:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fa6fc6702fed3fdba34355bd54f161fd4169a5af.png)

Now I want the daylight hours – a decimal number that comes from my API – in the tooltip to be displayed in an _hh:mm:ss_ format instead of the pure floating point number.

Here's the function node's code that sits directly in front of the chart node (sorry for the German comments 🤷‍♂️):

```javascript
const apiResponses = msg.payload;
const flatPayload = [];

apiResponses.forEach(response => {
    response.curve_data.forEach(pt => {
        // Präzise Umrechnung in Sekunden für hh:mm:ss
        const totalSeconds = Math.round(pt.daylight_hours * 3600);
        const h = Math.floor(totalSeconds / 3600);
        const m = Math.floor((totalSeconds % 3600) / 60);
        const s = totalSeconds % 60;

        // Formatierung nach ISO (24h)
        const timeStr = [h, m, s]
            .map(v => v.toString().padStart(2, '0'))
            .join(':');

        flatPayload.push({
            series: response.location,
            x: new Date(pt.date + "T12:00:00Z").getTime(),
            y: pt.daylight_hours,
            // Wir parken den Zeit-String im 'name' Attribut für den Tooltip {b}
            name: timeStr
        });
    });
});

msg.payload = flatPayload;

msg.ui_update = {
    chartOptions: {
        tooltip: {
            show: true,
            trigger: 'axis',
            formatter: '< now what here??? >',
            valueFormatter: '< or is it this one? how? >'
        }
    }
};

// Ausgang 1: Chart | Ausgang 2: Spinner-Template (auf false setzen)
return [msg, { payload: false }];

```

So, you see, I already did the building of the string I want to see but I just don't know how to put it into the value region of the tooltip window. 😞

The 2nd output of the function node just triggers the visibility of a spinner so that during the HTTP requests that actually get the data from the API the user sees that something is happening.

Here's a screenshot of a debug node's output that shows the data right after the function node:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/866317bbdf914f03274c92d443395c3aaccc8b79.png)

We see that the duration formatting (key `name`) actually works.  
But how can I replace the decimal duration in the tooltip with this string now?

In case it's important: The chart node is configured like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6c26647354a51b5c9e325a56203b382d2233bba9.png)

Thanks so much in advance!! 🙏  
Stefan.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 March 2026 22:11 UTC](https://discourse.nodered.org/t/ui-chart-echarts-valueformatter-or-formatter-but-how/100629/2 "2026-03-22T22:11:24Z")

</div>

Unfortunately, in order to do that, you would need to use tooltip.valueFormatter, I think, passing it a callback function to perform the formatting that you want. That doesn't work in chartOptions, but I don't know whether the problem is that the code in the ui-chart widget does not work with callback functions, or if there is a problem with valueFormatter, or possibly a combination of the two.

At the moment I don't know of a solution.

---

<div class="post-metadata">

**Author:** ![metawops](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/metawops/32/105800_2.png) [@metawops](https://discourse.nodered.org/u/metawops)\
**Post date:** [22 March 2026 22:17 UTC](https://discourse.nodered.org/t/ui-chart-echarts-valueformatter-or-formatter-but-how/100629/3 "2026-03-22T22:17:05Z")

</div>

Thanks, @Colin, for this response. Makes me slightly happy because now I know that it doesn't seem to be easy.  
Maybe a template node can be of help here where we access the echarts DOM object and can pass/add/inject a callback function somehow? 🧐

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 April 2026 22:17 UTC](https://discourse.nodered.org/t/ui-chart-echarts-valueformatter-or-formatter-but-how/100629/4 "2026-04-21T22:17:57Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.