# 2 Y-axis for a line chart

**URL:** <https://discourse.nodered.org/t/2-y-axis-for-a-line-chart/96293>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [27 March 2025 10:32 UTC](https://discourse.nodered.org/t/2-y-axis-for-a-line-chart/96293 "2025-03-27T10:32:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![GBROKO](https://avatars.discourse-cdn.com/v4/letter/g/c77e96/32.png) [@GBROKO](https://discourse.nodered.org/u/GBROKO)\
**Post date:** [27 March 2025 10:32 UTC](https://discourse.nodered.org/t/2-y-axis-for-a-line-chart/96293/1 "2025-03-27T10:32:20Z")

</div>

I want two y-axis. Thats my code but it is not working.

```auto
[
    {
        "id": "4d42c82f441208c2",
        "type": "inject",
        "z": "6358dcd8731b6b68",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1200",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 270,
        "y": 2120,
        "wires": [
            [
                "2a3df72899b75e5d"
            ]
        ]
    },
    {
        "id": "2a3df72899b75e5d",
        "type": "function",
        "z": "6358dcd8731b6b68",
        "name": "Abfrage der Werte",
        "func": "// Hole die Werte aus der globalen Variable\nlet leistung = global.get(\"Leistung\") || 0;\nlet temperatur = global.get(\"temperatur_Zelt\") || 0;\n\n// Konfiguriere das Diagramm mit zwei Y-Achsen\nlet ui_control = {\n \"options\": {\n \"scales\": {\n \"yAxes\": [\n {\n \"id\": \"y-axis-1\",\n \"type\": \"linear\",\n \"position\": \"left\",\n \"scaleLabel\": { \"display\": true, \"labelString\": \"Leistung (Watt)\" }\n },\n {\n \"id\": \"y-axis-2\",\n \"type\": \"linear\",\n \"position\": \"right\",\n \"scaleLabel\": { \"display\": true, \"labelString\": \"Temperatur (°C)\" }\n }\n]\n }\n }\n};\n\n// Sende die Werte als einzelne Nachrichten mit zugewiesener Achse\nlet msgs = [\n { topic: \"Leistung\", payload: leistung, ui_control, yAxisID: \"y-axis-1\" },\n { topic: \"Temperatur\", payload: temperatur, ui_control, yAxisID: \"y-axis-2\" }\n];\n\n// Mehrere Nachrichten senden\nreturn [msgs];\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 550,
        "y": 2120,
        "wires": [
            [
                "0338ca703a132da7",
                "ffd716f710613851"
            ]
        ]
    },
    {
        "id": "0338ca703a132da7",
        "type": "ui-chart",
        "z": "6358dcd8731b6b68",
        "group": "2a8e39cac6fe4bb9",
        "name": "Leistung und Temperatur",
        "label": "Leistung und Temperatur",
        "order": 4,
        "chartType": "line",
        "category": "topic",
        "categoryType": "msg",
        "xAxisLabel": "",
        "xAxisProperty": "",
        "xAxisPropertyType": "timestamp",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "",
        "yAxisProperty": "payload",
        "yAxisPropertyType": "msg",
        "ymin": "",
        "ymax": "",
        "bins": 10,
        "action": "append",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": 6,
        "height": 8,
        "className": "",
        "interpolation": "linear",
        "x": 850,
        "y": 2120,
        "wires": [
            []
        ]
    },
    {
        "id": "ffd716f710613851",
        "type": "debug",
        "z": "6358dcd8731b6b68",
        "name": "debug 7",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 740,
        "y": 2220,
        "wires": []
    },
    {
        "id": "2a8e39cac6fe4bb9",
        "type": "ui-group",
        "name": "Microgreens Zelt",
        "page": "8e53903ac41b05c6",
        "width": "8",
        "height": "4",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "8e53903ac41b05c6",
        "type": "ui-page",
        "name": "Microgreens Zelt",
        "ui": "29b53658faf575c1",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "622486944d7f9c5e",
        "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": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "29b53658faf575c1",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-scheduler"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true
    },
    {
        "id": "622486944d7f9c5e",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [27 March 2025 11:16 UTC](https://discourse.nodered.org/t/2-y-axis-for-a-line-chart/96293/2 "2025-03-27T11:16:37Z")

</div>

Chart node does not support that.  
You can do it by making the charts with ui\_template so you can provide options for scales.

```auto
scales: {
   x: {
       // x options here
   },
   y:{
       display: true,
       position: 'right'
   },
   y1:{
       display: true,
       position: 'left',                                
       grid: {
            drawOnChartArea: false 
       }
   }
}

```

---

<div class="post-metadata">

**Author:** ![GBROKO](https://avatars.discourse-cdn.com/v4/letter/g/c77e96/32.png) [@GBROKO](https://discourse.nodered.org/u/GBROKO)\
**Post date:** [28 March 2025 08:19 UTC](https://discourse.nodered.org/t/2-y-axis-for-a-line-chart/96293/3 "2025-03-28T08:19:03Z")

</div>

Thanks.  
Thats my code so far:

```auto
[
    {
        "id": "21c8f753b3ae1f0d",
        "type": "ui-template",
        "z": "6358dcd8731b6b68",
        "group": "2a8e39cac6fe4bb9",
        "page": "",
        "ui": "",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<canvas id=\"myChart\"></canvas>\n\n<script>\n let ctx = document.getElementById('myChart').getContext('2d');\n let chart;\n let chartData = {\n labels: [],\n datasets: [\n {\n label: \"Leistung\",\n data: [],\n borderColor: \"blue\",\n yAxisID: 'y-axis-1',\n fill: false\n },\n {\n label: \"Temperatur\",\n data: [],\n borderColor: \"red\",\n yAxisID: 'y-axis-2',\n fill: false\n }\n ]\n };\n\n chart = new Chart(ctx, {\n type: 'line',\n data: chartData,\n options: {\n responsive: true,\n scales: {\n x: { display: true, title: { display: true, text: 'Zeit' } },\n y: {\n id: 'y-axis-1',\n position: 'left',\n title: { display: true, text: 'Leistung' }\n },\n y1: {\n id: 'y-axis-2',\n position: 'right',\n title: { display: true, text: 'Temperatur' },\n grid: { drawOnChartArea: false }\n }\n }\n }\n });\n\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (!msg) return;\n\n let now = new Date().toLocaleTimeString();\n if (chartData.labels.length > 20) {\n chartData.labels.shift();\n chartData.datasets[0].data.shift();\n chartData.datasets[1].data.shift();\n }\n chartData.labels.push(now);\n\n if (msg.topic === \"Leistung\") {\n chartData.datasets[0].data.push(msg.payload);\n } else if (msg.topic === \"Temperatur\") {\n chartData.datasets[1].data.push(msg.payload);\n }\n\n chart.update();\n });\n })(scope);\n</script>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 820,
        "y": 2320,
        "wires": [
            []
        ]
    },
    {
        "id": "c81f9c32add94141",
        "type": "inject",
        "z": "6358dcd8731b6b68",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1200",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 310,
        "y": 2320,
        "wires": [
            [
                "e74eda6ada2cec39"
            ]
        ]
    },
    {
        "id": "e74eda6ada2cec39",
        "type": "function",
        "z": "6358dcd8731b6b68",
        "name": "Abfrage der Werte",
        "func": "// Hole die Werte aus der globalen Variable\nlet leistung = global.get(\"Leistung\") || 0;\nlet temperatur = global.get(\"temperatur_Zelt\") || 0;\n\n\n// Sende die Werte nacheinander als einzelne Nachrichten an den Chart\nlet msgs = [\n { topic: \"Leistung\", payload: leistung },\n { topic: \"Temperatur\", payload: temperatur },\n];\n\n// Mehrere Nachrichten senden\nreturn [msgs];",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 590,
        "y": 2320,
        "wires": [
            [
                "21c8f753b3ae1f0d",
                "33fe2274767f7ce8"
            ]
        ]
    },
    {
        "id": "33fe2274767f7ce8",
        "type": "debug",
        "z": "6358dcd8731b6b68",
        "name": "debug 7",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 720,
        "y": 2400,
        "wires": []
    },
    {
        "id": "2a8e39cac6fe4bb9",
        "type": "ui-group",
        "name": "Microgreens Zelt",
        "page": "8e53903ac41b05c6",
        "width": "8",
        "height": "4",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "8e53903ac41b05c6",
        "type": "ui-page",
        "name": "Microgreens Zelt",
        "ui": "29b53658faf575c1",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "622486944d7f9c5e",
        "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": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "29b53658faf575c1",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-scheduler"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true
    },
    {
        "id": "622486944d7f9c5e",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

The Problem is i get 2 random y axis on the left and there is no data point/line visible.  
I checked the function if the template recivise the data, and its working.  
Any ideas ?

---

<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:** [27 April 2025 08:19 UTC](https://discourse.nodered.org/t/2-y-axis-for-a-line-chart/96293/4 "2025-04-27T08:19:31Z")

</div>

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