# eChart: how can I make the tooltip visible?

**URL:** <https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078>\
**Category:** General\
**Tags:** dashboard-2, ui-template\
**Created:** [3 January 2026 21:07 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078 "2026-01-03T21:07:00Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![rewegit](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rewegit/32/4778_2.png) [@rewegit](https://discourse.nodered.org/u/rewegit)\
**Post date:** [9 January 2026 14:27 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/21 "2026-01-09T14:27:14Z")

</div>

> [@Colin](#):
>
> I haven't got much time at the moment.

Unfortunately, I feel the same way. We're having snow chaos here 😉 But you can actually find everything in the PDF in my first post in this thread.

---

<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:** [9 January 2026 14:41 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/22 "2026-01-09T14:41:34Z")

</div>

That is using a UI template. I am interested in whether it can be done using the built in chart node.

---

<div class="post-metadata">

**Author:** ![joachim\_bl](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Post date:** [9 January 2026 16:13 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/23 "2026-01-09T16:13:32Z")

</div>

The problem with the tooltip seems to be a vue problem. I created a vanilla vue app and used a vanilla example code from the echarts webpage and it also failed to show the tooltip (but only for 'XAxis' not for 'Item'), same as in the ui-template node.

The build in chart from flowfuse does, as far as I understand it, not allow multiple Y-Axis, at least I don´t see where I could configure them in the chart node. There are some hints on the echarts web page that in vue you have to avoid the ref for initializing the chart, but this didn´t make a difference when I tried it.

Yes, i do hope this will be fixed in a future version but as for now i am glad to have the workaround.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [9 January 2026 16:29 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/24 "2026-01-09T16:29:36Z")

</div>

I am still not sure what the issue is. I use eCharts in a ui-template node with 2 Y axis and have no problem with tooltip

---

<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:** [9 January 2026 16:29 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/25 "2026-01-09T16:29:46Z")

</div>

> [@joachim\_bl](#):
>
> The build in chart from flowfuse does, as far as I understand it, not allow multiple Y-Axis,

You can now use ~~msg.ui\_builder.chartOptions~~ msg.ui\_updates.chartOptions to provide for options not provided in the node's config. See the node help text.

Edit: corrected typo above.

---

<div class="post-metadata">

**Author:** ![joachim\_bl](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Post date:** [9 January 2026 17:43 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/26 "2026-01-09T17:43:21Z")

</div>

Thanks for pointing this out! I was confused by the help of the ui-chart node because in the beginning they talk about echarts, but in the "custom charts" area they import still the old "chartjs". But you are right it seems that i can set the option object of echarts with a msg object. I will have a try if the tooltip there works!

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [9 January 2026 18:52 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/27 "2026-01-09T18:52:13Z")

</div>

msg.ui\_update.chartOptions. This works well. I like my x axis labels at a 35 degree angle. Simples

---

<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:** [10 January 2026 11:07 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/28 "2026-01-10T11:07:46Z")

</div>

> [@joachim\_bl](#):
>
> in the "custom charts" area they import still the old "chartjs"

Hmm, that is not ideal. These should be reworked, preferably using ui\_update.chartOptions where relevant.

---

<div class="post-metadata">

**Author:** ![joachim\_bl](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Post date:** [12 January 2026 14:00 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/29 "2026-01-12T14:00:58Z")

</div>

I can confirm that I can set multiple y axis and that the tooltip works. But I have a problem that once I send the chart.Option message the chart gets cleard. Also how does the chart assign sequential indexes to the series? Which one is series 0, 1, 2...?

Here is my flow:

```flow
[
    {
        "id": "5215d52243d14908",
        "type": "tab",
        "label": "Flow 7",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "a380bd05bbd478e6",
        "type": "inject",
        "z": "5215d52243d14908",
        "name": "ui_update",
        "props": [
            {
                "p": "ui_update.chartOptions",
                "v": "{\"yAxis\":[{\"type\":\"value\",\"name\":\"Temperatur\",\"min\":10,\"max\":24,\"splitLine\":{\"show\":true},\"axisLabel\":{\"formatter\":\"{value}°C\"},\"axisLine\":{\"show\":true},\"axisPointer\":{\"snap\":true}},{\"type\":\"value\",\"name\":\"CO2\",\"splitLine\":{\"show\":false},\"nameGap\":15,\"nameMoveOverlap\":true,\"position\":\"right\",\"offset\":45,\"axisLine\":{\"show\":true},\"axisTick\":{\"show\":true},\"min\":400,\"max\":1500},{\"type\":\"value\",\"name\":\"% RH\",\"position\":\"right\",\"splitLine\":{\"show\":false},\"axisLine\":{\"show\":true}}],\"series\":[{\"name\":\"Temperatur\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"yAxisIndex\":0,\"symbolSize\":2,\"tooltip\":{\"valueFormatter\":\"{value} °C\"},\"lineStyle\":{\"width\":1}},{\"name\":\"CO2 (ppm)\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"symbolSize\":2,\"yAxisIndex\":1},{\"name\":\"RH in %\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"symbolSize\":2,\"splitLine\":{\"show\":false,\"lineStyle\":{\"width\":1}},\"yAxisIndex\":2}]}",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 260,
        "y": 160,
        "wires": [
            [
                "3550f7e778083a88"
            ]
        ],
        "info": " chartTitle: 'Met Office Weather 24hr Forecast for',\r\n\r\n // Note that these are the standard for my normal charts. Not used for this chart\r\n yAxisKey: 'value', \t// String value - label, 'y' is the default\r\n xAxisKey: 'period', \t// Number value - data, 'x' is the default\r\n seriesKey: 'attribute', \t// '' is the default (none)\r\n\r\n yAxisLeftMin: -5,\r\n yAxisLeftMax: 30.0,\r\n\r\n yAxisRightMin: 0,\r\n yAxisRightMax: 10.0,\r\n\r\n yAxisLeftTitle: 'Temperature [°C]',\r\n\t\t\t\tyAxisRightTitle: 'Rainfall [mm]',\r\n xAxisTitle: '',"
    },
    {
        "id": "2d2e714030317eee",
        "type": "inject",
        "z": "5215d52243d14908",
        "name": "Klimadaten",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "payload.title",
                "v": "Klimadaten",
                "vt": "str"
            },
            {
                "p": "payload.labels",
                "v": "[\"07:00\",\"08:00\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"13:00\",\"14:00\",\"15:00\",\"16:00\",\"17:00\",\"18:00\"]",
                "vt": "json"
            },
            {
                "p": "payload.CO2",
                "v": "[8600,8750,7800,8700,9600,6400,5600,4750,5980,6000,5555,5150]",
                "vt": "json"
            },
            {
                "p": "payload.RH",
                "v": "[70,71,75,80,77,80,85,90,90,89,88,87]",
                "vt": "json"
            },
            {
                "p": "payload.Temp",
                "v": "[15,15,16,17,19,18,19,17,16.5,16.5,17,20]",
                "vt": "json"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "data",
        "payload": "{}",
        "payloadType": "json",
        "x": 260,
        "y": 80,
        "wires": [
            [
                "749ab2cc9890203c"
            ]
        ]
    },
    {
        "id": "3550f7e778083a88",
        "type": "ui-chart",
        "z": "5215d52243d14908",
        "group": "27cbb588209b066c",
        "name": "TestGraph",
        "label": "Fruchtungsraum1",
        "order": 9007199254740991,
        "chartType": "line",
        "category": "tag",
        "categoryType": "property",
        "xAxisLabel": "Zeit",
        "xAxisProperty": "label",
        "xAxisPropertyType": "property",
        "xAxisType": "category",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "",
        "yAxisProperty": "value",
        "yAxisPropertyType": "property",
        "ymin": "",
        "ymax": "",
        "bins": 10,
        "action": "replace",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": "2",
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#36b300",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": 6,
        "height": 8,
        "className": "",
        "interpolation": "linear",
        "x": 710,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "749ab2cc9890203c",
        "type": "function",
        "z": "5215d52243d14908",
        "name": "function 3",
        "func": "var mydata = []\nfor( var i=0; i<12; i++ ){\n mydata.push({\"label\": msg.payload.labels[i], \"tag\": \"Temp\", value: msg.payload.Temp[i]})\n mydata.push({\"label\": msg.payload.labels[i], \"tag\": \"CO2\", value: msg.payload.CO2[i]})\n mydata.push({\"label\": msg.payload.labels[i], \"tag\": \"RH\", value: msg.payload.RH[i]})\n}\nmsg.payload = mydata;\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 500,
        "y": 120,
        "wires": [
            [
                "3550f7e778083a88",
                "18d953fbae906c40"
            ]
        ]
    },
    {
        "id": "18d953fbae906c40",
        "type": "debug",
        "z": "5215d52243d14908",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 720,
        "y": 240,
        "wires": []
    },
    {
        "id": "27cbb588209b066c",
        "type": "ui-group",
        "name": "Graph-Control",
        "page": "b1366025f77b8dd4",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "b1366025f77b8dd4",
        "type": "ui-page",
        "name": "Seite 1",
        "ui": "6a50f35f2ffe099b",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "dfda5a006f3f7e59",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "6a50f35f2ffe099b",
        "type": "ui-base",
        "name": "Mein Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "dfda5a006f3f7e59",
        "type": "ui-theme",
        "name": "Standardthema",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "35ef3321c2bb5fc2",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.0"
        }
    }
]

```

---

<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:** [12 January 2026 15:13 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/30 "2026-01-12T15:13:36Z")

</div>

> [@joachim\_bl](#):
>
> how does the chart assign sequential indexes to the series? Which one is series 0, 1, 2...?

It isn't by position in the array, the `name` property in the series elements is used to match it to the data, so, for your data, then name properties in the series array should be Temp, CO2 and RH. The names in the axis array can be different as they are indexed from the series.

I am not seeing the chart being cleared when the ui\_update is fed in, and I am not seeing the tooltip (after ui\_update), instead in the browser developer console I am seeing a crash in eCharts.

After further investigation, the crash is being caused by the tooltip format spec in the Temp series

```auto

            "tooltip": {
                "valueFormatter": "{value} °C"
            },

```

If I remove that, and correct the names in the series then it all seems to be working, apart from the fact that the tooltip formatting is missing. I will take a look at that.

---

<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:** [12 January 2026 15:59 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/31 "2026-01-12T15:59:02Z")

</div>

The first problem with the tooltip formatting is that it should be

```auto

            "tooltip": {
                "formatter": "{c} °C"
            },

```

See [Documentation - Apache ECharts](https://echarts.apache.org/en/option.html#series-line.tooltip.formatter)

The second problem is that, as is noted in that link,  
**Notice：** series.tooltip only works when [tooltip.trigger](https://echarts.apache.org/en/option.html#tooltip.trigger) is `'item'`

So to make it work you have to add, at the top level, not in the series

```auto

    "tooltip": {
        "trigger": "item"
    },

```

The tooltip does then work, but because it is set to 'item' you get a tooltip on each individual data point, not across the whole set. So basically eCharts does not support tooltip formating in the axis tooltip mode.  
Apart from that it seems to be all working, for me.

---

<div class="post-metadata">

**Author:** ![joachim\_bl](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Post date:** [12 January 2026 22:52 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/32 "2026-01-12T22:52:35Z")

</div>

Hi Colin, thanks very much for your corrections. I fixed my code according to your suggestions, except for the tooltip trigger, since I actually see the tooltip correctly:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/4/1462b81a2914afef72dbd9239433eeae75fe1d39.png)  
My problem is that all series are aligned to the left y axis and this didn´t change even when I named the series in the option object to the names in the data object!?  
It also seems there is some buffering going on. When I deployed the chart the first time, it didn´t have any additional y-axis (since they are defined only in the additional options object). Then I send the option object and the y axis appear all correctly with their min-max value, but the chart is empty. When I now inject the data again, the axis stay, but only the left y-axis (the default) is used.If i remove the chart and deploy it again, it still seems to hold the optional settings from before, since the right y-axises also appear, so I cannot go back to the initial stage.

---

<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:** [13 January 2026 09:17 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/33 "2026-01-13T09:17:44Z")

</div>

> [@joachim\_bl](#):
>
> I actually see the tooltip correctly:

No you aren't. The

> [@Colin](#):
>
> ```auto
> "tooltip": {
> "valueFormatter": "{value} °C"
> },
> 
> ```

You asked for the temperature to be displayed in the tootip with °C on the end. That is not there. That is the feature that eCharts does not support with the tooltip in axis mode.

> [@joachim\_bl](#):
>
> Then I send the option object and the y axis appear all correctly with their min-max value, but the chart is empty.

Are you sure that you are using the latest version of the dashboard, v1.30.1?

If you are can you export just the two inject nodes so that I can try exactly what you are now doing plese.

---

<div class="post-metadata">

**Author:** ![joachim\_bl](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Post date:** [13 January 2026 11:54 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/34 "2026-01-13T11:54:21Z")

</div>

Ok. I was on 1.30.0 and updated to 1.30.1.

1. After the update+restart, the chart did not show the additional axis anymore.
2. When I send the data to the chart, it showed all three lines, yet all connected to the left, default yAxis. Tooltip worked cummulativ for all lines
3. When I send the option object, the 2 additional axis on the right showed up and this time all lines where mapped correctly! Tooltip worked cummulativ for all lines, yet WITHOUT the formatting

I could live without the formatting, but from now on all changes in the options object are applied cummulative. I tried the formatter which brought an error in the console and no tooltip showed anymore, then i REMOVED the formatter, but the error in the console still shows and complaints some code in the formatter section of echarts. Even if i set the tooltip object to {} I cannot undo my setting.

Is there a way to reset the options to the state that the echart control generates by default?

Here is my options msg node:

```auto
[
    {
        "id": "a380bd05bbd478e6",
        "type": "inject",
        "z": "5215d52243d14908",
        "name": "ui_update",
        "props": [
            {
                "p": "ui_update.chartOptions",
                "v": "{\"yAxis\":[{\"type\":\"value\",\"name\":\"Temp\",\"min\":10,\"max\":24,\"splitLine\":{\"show\":true},\"axisLabel\":{},\"axisLine\":{\"show\":true},\"axisPointer\":{\"snap\":true}},{\"type\":\"value\",\"name\":\"CO2\",\"splitLine\":{\"show\":false},\"nameGap\":15,\"nameMoveOverlap\":true,\"position\":\"right\",\"offset\":45,\"axisLine\":{\"show\":true},\"axisTick\":{\"show\":true},\"min\":400,\"max\":1500},{\"type\":\"value\",\"name\":\"RH\",\"position\":\"right\",\"splitLine\":{\"show\":false},\"axisLine\":{\"show\":true}}],\"series\":[{\"name\":\"Temp\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"yAxisIndex\":0,\"symbolSize\":2,\"tooltip\":{},\"lineStyle\":{\"width\":1}},{\"name\":\"CO2\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"symbolSize\":2,\"yAxisIndex\":1},{\"name\":\"RH\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"symbolSize\":2,\"splitLine\":{\"show\":false,\"lineStyle\":{\"width\":1}},\"yAxisIndex\":2}]}",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 260,
        "y": 160,
        "wires": [
            [
                "3550f7e778083a88"
            ]
        ],
        "info": " chartTitle: 'Met Office Weather 24hr Forecast for',\r\n\r\n // Note that these are the standard for my normal charts. Not used for this chart\r\n yAxisKey: 'value', \t// String value - label, 'y' is the default\r\n xAxisKey: 'period', \t// Number value - data, 'x' is the default\r\n seriesKey: 'attribute', \t// '' is the default (none)\r\n\r\n yAxisLeftMin: -5,\r\n yAxisLeftMax: 30.0,\r\n\r\n yAxisRightMin: 0,\r\n yAxisRightMax: 10.0,\r\n\r\n yAxisLeftTitle: 'Temperature [°C]',\r\n\t\t\t\tyAxisRightTitle: 'Rainfall [mm]',\r\n xAxisTitle: '',"
    }
]

```

Later: there was a hickup with the upgrade. Now I am on 1.30.1 and there is no error anymore when setting the formatter, it is just ignored in series as well as in yAxis. I can live with the current state although I eagerly wait for the formatter being functional in a future version!  
Thanks for your help, Colin!

---

<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:** [13 January 2026 13:19 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/35 "2026-01-13T13:19:16Z")

</div>

> [@joachim\_bl](#):
>
> I can live with the current state although I eagerly wait for the formatter being functional in a future version!

As I explained, that is not something that we can do anything about, eCharts does not support tooltip formatting in axis mode. If they start supporting it then it will work in node red.

So is everything else working correctly now?

---

<div class="post-metadata">

**Author:** ![joachim\_bl](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Post date:** [13 January 2026 16:12 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/36 "2026-01-13T16:12:12Z")

</div>

Mmmmh, maybe I get something wrong, but I was able to format on their [example](https://echarts.apache.org/examples/en/editor.html?c=line-race) page:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f385c19ac2799637d5ad4016447e5fd63b5d4f4.jpeg)  
And in the [help](https://echarts.apache.org/en/option.html#tooltip.formatter) I find this:

When [trigger](https://echarts.apache.org/en/option.html#tooltip.trigger) is `'axis'` , or when tooltip is triggered by [axisPointer](https://echarts.apache.org/en/option.html#xAxis.axisPointer), `params` is the data array of multiple series. The content of each item of the array is the same as above.

Am I looking in the wrong place?

---

<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:** [13 January 2026 17:04 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/37 "2026-01-13T17:04:16Z")

</div>

That isn't what you have got, that is using the same format for all series, you are trying to format the tooltip differently for each series.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [13 January 2026 17:10 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/38 "2026-01-13T17:10:16Z")

</div>

> [@Colin](#):
>
> That is the feature that eCharts does not support with the tooltip in axis mode.

try

```auto
valueFormatter: (value) => value + '°C'

```

or

```auto
valueFormatter: (value) => `${value} °C`

```

---

<div class="post-metadata">

**Author:** ![joachim\_bl](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Post date:** [13 January 2026 17:44 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/39 "2026-01-13T17:44:19Z")

</div>

When you look above at my screenshot, i have ONE tooltip object that is linked to the x-axis and shows the value of all 3 series. That is exactly the same in the echarts example. One tooltip and in that tooltip i can format each series as a list.

---

<div class="post-metadata">

**Author:** ![joachim\_bl](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Post date:** [13 January 2026 17:55 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078/40 "2026-01-13T17:55:15Z")

</div>

> [@Buckskin](#):
>
> `(value) => `${value} °C`

it doesn´t like the '\>': The Symbol '\>' cannot be used as an unary operator

[Previous page](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078.md?page=1)

[Next page](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078.md?page=3)