# Trouble displaying chart.js line chart on Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/trouble-displaying-chart-js-line-chart-on-dashboard-2-0/98052>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 July 2025 13:44 UTC](https://discourse.nodered.org/t/trouble-displaying-chart-js-line-chart-on-dashboard-2-0/98052 "2025-07-09T13:44:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShadyPhD](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@ShadyPhD](https://discourse.nodered.org/u/ShadyPhD)\
**Post date:** [9 July 2025 13:44 UTC](https://discourse.nodered.org/t/trouble-displaying-chart-js-line-chart-on-dashboard-2-0/98052/1 "2025-07-09T13:44:50Z")

</div>

Hello,  
I am trying to wrap up a proof of concept i am making to store and display process control data in a node red dashboard. i will start by saying i am very green when it comes to html, javascript, and node-red. i have spent a fair amount of time in node red trying to learn as i go but i seem to be stumped and ai code generation has almost gotten me there but i am having an issue when using actual data instead of test/sample data.

My data is going to be pulled from a ms-sql database via a "node-red-contrib-mssql-plus" node. here is a small sample of how the data is output via msg.payload:  
"[{"Stamp":"2025-07-08T12:25:50.427Z","Last\_Weighed":203.24,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.772},{"Stamp":"2025-07-08T12:25:51.123Z","Last\_Weighed":199.11,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.888},{"Stamp":"2025-07-08T12:25:51.660Z","Last\_Weighed":186.5,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.961},{"Stamp":"2025-07-08T12:25:52.233Z","Last\_Weighed":171.52,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.983},{"Stamp":"2025-07-08T12:25:52.877Z","Last\_Weighed":148.91,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.929}]"

Here is what the layout of my dashboard (@flowfuse/node-red-dashboard) looks like with the working static chart:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/35a1fa54fc7475bf5fbe529b131f5fe084fae941.png)

now, once i amend the code to accept data via msg.payload instead of it being statically built in, the chart does not display at all, just leaving a blank canvas. Any thoughts on where my issue lies?

Thank you in advance

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

```auto
[
    {
        "id": "db379ea65e11bedc",
        "type": "ui-template",
        "z": "422ecc23a312cf7c",
        "group": "78941b46bdde56bb",
        "page": "",
        "ui": "",
        "name": "working static chart (dont delete)",
        "order": 17,
        "width": "3",
        "height": "10",
        "head": "",
        "format": "<!DOCTYPE html>\n<html>\n<head>\n <title>Line Chart Example</title>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n</head>\n<body>\n <canvas id=\"myChart\" width=\"900\" height=\"450\"></canvas>\n\n <script>\n // Example data (replace with your actual data arrays)\n const stamp = [\n \"2025-07-01T10:00:00Z\",\n \"2025-07-01T11:00:00Z\",\n \"2025-07-01T12:00:00Z\"\n];\n\n const last_weighed = [98, 99.5, 97.8];\n const target = [100, 100, 100];\n const xbar = [98.5, 99.2, 98.7];\n const lcl = [95, 95, 95];\n const ucl = [105, 105, 105];\n const lsl = [90, 90, 90];\n const usl = [110, 110, 110];\n\n const ctx = document.getElementById('myChart').getContext('2d');\n\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: stamp, // x-axis values\n datasets: [\n {\n label: 'Last Weighed',\n data: last_weighed,\n borderColor: 'blue',\n fill: false,\n tension: 0.1\n },\n {\n label: 'Target',\n data: target,\n borderColor: 'green',\n fill: false,\n borderDash: [5, 5],\n tension: 0.1\n },\n {\n label: 'X̄ (Xbar)',\n data: xbar,\n borderColor: 'black',\n fill: false,\n tension: 0.1\n },\n {\n label: 'LCL',\n data: lcl,\n borderColor: 'orange',\n fill: false,\n borderDash: [4, 4],\n tension: 0.1\n },\n {\n label: 'UCL',\n data: ucl,\n borderColor: 'orange',\n fill: false,\n borderDash: [4, 4],\n tension: 0.1\n },\n {\n label: 'LSL',\n data: lsl,\n borderColor: 'red',\n fill: false,\n borderDash: [6, 2],\n tension: 0.1\n },\n {\n label: 'USL',\n data: usl,\n borderColor: 'red',\n fill: false,\n borderDash: [6, 2],\n tension: 0.1\n }\n ]\n },\n options: {\n responsive: true,\n scales: {\n x: {\n type: 'time',\n time: {\n tooltipFormat: 'MMM d, HH:mm',\n unit: 'hour'\n },\n title: {\n display: true,\n text: 'Timestamp'\n }\n },\n y: {\n title: {\n display: true,\n text: 'Value'\n }\n }\n },\n plugins: {\n legend: {\n position: 'top'\n },\n title: {\n display: true,\n text: 'Process Control Chart'\n }\n }\n }\n });\n </script>\n</body>\n</html>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 470,
        "y": 1520,
        "wires": [
            []
        ]
    },
    {
        "id": "3a6b0941167264eb",
        "type": "inject",
        "z": "422ecc23a312cf7c",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 200,
        "y": 1520,
        "wires": [
            [
                "db379ea65e11bedc"
            ]
        ]
    },
    {
        "id": "0bdbcb2aab9e05ba",
        "type": "ui-template",
        "z": "422ecc23a312cf7c",
        "group": "78941b46bdde56bb",
        "page": "",
        "ui": "",
        "name": "chart if injected data - not working",
        "order": 12,
        "width": "3",
        "height": "10",
        "head": "",
        "format": "<style>\n#myChart {\n width: 100% !important;\n height: 300px !important;\n}\n</style>\n\n<canvas id=\"myChart\"></canvas>\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\nexport default {\n data() {\n return {\n chart: null\n };\n },\n methods: {\n renderChart(data) {\n if (!Array.isArray(data) || data.length === 0) return;\n\n const labels = data.map(d => new Date(d.Stamp).toLocaleTimeString());\n const lastWeighed = data.map(d => d.Last_Weighed);\n const target = data.map(d => d.Target);\n const xbar = data.map(d => d.Xbar);\n const lcl = data.map(d => d.LCL);\n const ucl = data.map(d => d.UCL);\n const lsl = data.map(d => d.LSL);\n const usl = data.map(d => d.USL);\n\n const ctx = this.$el.querySelector('#myChart').getContext('2d');\n\n if (this.chart) {\n this.chart.destroy();\n }\n\n this.chart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n label: 'Last Weighed',\n data: lastWeighed,\n borderColor: 'blue',\n fill: false,\n tension: 0.1\n },\n {\n label: 'Target',\n data: target,\n borderColor: 'green',\n fill: false,\n borderDash: [5, 5],\n tension: 0.1\n },\n {\n label: 'X̄ (Xbar)',\n data: xbar,\n borderColor: 'black',\n fill: false,\n tension: 0.1\n },\n {\n label: 'LCL',\n data: lcl,\n borderColor: 'orange',\n fill: false,\n borderDash: [4, 4],\n tension: 0.1\n },\n {\n label: 'UCL',\n data: ucl,\n borderColor: 'orange',\n fill: false,\n borderDash: [4, 4],\n tension: 0.1\n },\n {\n label: 'LSL',\n data: lsl,\n borderColor: 'red',\n fill: false,\n borderDash: [6, 2],\n tension: 0.1\n },\n {\n label: 'USL',\n data: usl,\n borderColor: 'red',\n fill: false,\n borderDash: [6, 2],\n tension: 0.1\n }\n ]\n },\n options: {\n responsive: true,\n scales: {\n x: {\n title: {\n display: true,\n text: 'Timestamp'\n }\n },\n y: {\n title: {\n display: true,\n text: 'Value'\n }\n }\n },\n plugins: {\n legend: {\n position: 'top'\n },\n title: {\n display: true,\n text: 'Process Control Chart'\n }\n }\n }\n });\n }\n },\n watch: {\n $props: {\n immediate: true,\n deep: true,\n handler(newProps) {\n if (newProps.payload) {\n this.renderChart(newProps.payload);\n }\n }\n }\n }\n};\n</script>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 460,
        "y": 1560,
        "wires": [
            []
        ]
    },
    {
        "id": "f56cd6a5f86661a1",
        "type": "inject",
        "z": "422ecc23a312cf7c",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"Stamp\":\"2025-07-08T12:25:04.220Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.383},{\"Stamp\":\"2025-07-08T12:25:04.917Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.044},{\"Stamp\":\"2025-07-08T12:25:05.473Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.778},{\"Stamp\":\"2025-07-08T12:25:06.113Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.558},{\"Stamp\":\"2025-07-08T12:25:06.660Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.411},{\"Stamp\":\"2025-07-08T12:25:07.327Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.346},{\"Stamp\":\"2025-07-08T12:25:07.860Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.382},{\"Stamp\":\"2025-07-08T12:25:08.433Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.485},{\"Stamp\":\"2025-07-08T12:25:09.057Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.643},{\"Stamp\":\"2025-07-08T12:25:09.610Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.817},{\"Stamp\":\"2025-07-08T12:25:10.310Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.023},{\"Stamp\":\"2025-07-08T12:25:10.850Z\",\"Last_Weighed\":213.66,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.24},{\"Stamp\":\"2025-07-08T12:25:11.507Z\",\"Last_Weighed\":210.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.441},{\"Stamp\":\"2025-07-08T12:25:12.040Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.641},{\"Stamp\":\"2025-07-08T12:25:12.743Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.808},{\"Stamp\":\"2025-07-08T12:25:13.273Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.955},{\"Stamp\":\"2025-07-08T12:25:13.923Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.047},{\"Stamp\":\"2025-07-08T12:25:14.463Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.075},{\"Stamp\":\"2025-07-08T12:25:15.037Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.006},{\"Stamp\":\"2025-07-08T12:25:15.737Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.863},{\"Stamp\":\"2025-07-08T12:25:16.290Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.653},{\"Stamp\":\"2025-07-08T12:25:16.920Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.406},{\"Stamp\":\"2025-07-08T12:25:17.453Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.096},{\"Stamp\":\"2025-07-08T12:25:18.040Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.854},{\"Stamp\":\"2025-07-08T12:25:18.633Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.652},{\"Stamp\":\"2025-07-08T12:25:19.220Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.517},{\"Stamp\":\"2025-07-08T12:25:19.923Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.457},{\"Stamp\":\"2025-07-08T12:25:20.467Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.49},{\"Stamp\":\"2025-07-08T12:25:21.110Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.584},{\"Stamp\":\"2025-07-08T12:25:21.643Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.728},{\"Stamp\":\"2025-07-08T12:25:22.227Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.887},{\"Stamp\":\"2025-07-08T12:25:22.810Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.075},{\"Stamp\":\"2025-07-08T12:25:23.517Z\",\"Last_Weighed\":213.66,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.273},{\"Stamp\":\"2025-07-08T12:25:24.053Z\",\"Last_Weighed\":210.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.458},{\"Stamp\":\"2025-07-08T12:25:24.717Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.641},{\"Stamp\":\"2025-07-08T12:25:25.260Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.794},{\"Stamp\":\"2025-07-08T12:25:25.830Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.929},{\"Stamp\":\"2025-07-08T12:25:26.430Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.014},{\"Stamp\":\"2025-07-08T12:25:27.140Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.039},{\"Stamp\":\"2025-07-08T12:25:27.683Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.976},{\"Stamp\":\"2025-07-08T12:25:28.243Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.845},{\"Stamp\":\"2025-07-08T12:25:28.810Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.652},{\"Stamp\":\"2025-07-08T12:25:29.523Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.425},{\"Stamp\":\"2025-07-08T12:25:30.067Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.14},{\"Stamp\":\"2025-07-08T12:25:30.637Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.917},{\"Stamp\":\"2025-07-08T12:25:31.347Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.731},{\"Stamp\":\"2025-07-08T12:25:31.890Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.607},{\"Stamp\":\"2025-07-08T12:25:32.430Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.551},{\"Stamp\":\"2025-07-08T12:25:33.107Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.581},{\"Stamp\":\"2025-07-08T12:25:33.653Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.667},{\"Stamp\":\"2025-07-08T12:25:34.293Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.799},{\"Stamp\":\"2025-07-08T12:25:34.847Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.946},{\"Stamp\":\"2025-07-08T12:25:35.453Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.119},{\"Stamp\":\"2025-07-08T12:25:36.017Z\",\"Last_Weighed\":213.66,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.302},{\"Stamp\":\"2025-07-08T12:25:36.607Z\",\"Last_Weighed\":210.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.472},{\"Stamp\":\"2025-07-08T12:25:37.310Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.641},{\"Stamp\":\"2025-07-08T12:25:37.837Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.782},{\"Stamp\":\"2025-07-08T12:25:38.423Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.907},{\"Stamp\":\"2025-07-08T12:25:39.030Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.985},{\"Stamp\":\"2025-07-08T12:25:39.610Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.009},{\"Stamp\":\"2025-07-08T12:25:40.307Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.951},{\"Stamp\":\"2025-07-08T12:25:40.847Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.829},{\"Stamp\":\"2025-07-08T12:25:41.433Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.651},{\"Stamp\":\"2025-07-08T12:25:42.017Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.441},{\"Stamp\":\"2025-07-08T12:25:42.723Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.178},{\"Stamp\":\"2025-07-08T12:25:43.263Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.97},{\"Stamp\":\"2025-07-08T12:25:43.927Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.798},{\"Stamp\":\"2025-07-08T12:25:44.447Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.683},{\"Stamp\":\"2025-07-08T12:25:45.020Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.631},{\"Stamp\":\"2025-07-08T12:25:45.717Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.659},{\"Stamp\":\"2025-07-08T12:25:46.247Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.738},{\"Stamp\":\"2025-07-08T12:25:46.910Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.861},{\"Stamp\":\"2025-07-08T12:25:47.553Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.996},{\"Stamp\":\"2025-07-08T12:25:48.093Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.157},{\"Stamp\":\"2025-07-08T12:25:48.633Z\",\"Last_Weighed\":213.66,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.326},{\"Stamp\":\"2025-07-08T12:25:49.313Z\",\"Last_Weighed\":210.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.484},{\"Stamp\":\"2025-07-08T12:25:49.853Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.641},{\"Stamp\":\"2025-07-08T12:25:50.427Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.772},{\"Stamp\":\"2025-07-08T12:25:51.123Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.888},{\"Stamp\":\"2025-07-08T12:25:51.660Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.961},{\"Stamp\":\"2025-07-08T12:25:52.233Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.983},{\"Stamp\":\"2025-07-08T12:25:52.877Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.929},{\"Stamp\":\"2025-07-08T12:25:53.420Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.816},{\"Stamp\":\"2025-07-08T12:25:54.117Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.651},{\"Stamp\":\"2025-07-08T12:25:54.657Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.455},{\"Stamp\":\"2025-07-08T12:25:55.340Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.21},{\"Stamp\":\"2025-07-08T12:25:55.870Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.017},{\"Stamp\":\"2025-07-08T12:25:56.517Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.856},{\"Stamp\":\"2025-07-08T12:25:57.087Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.749},{\"Stamp\":\"2025-07-08T12:25:57.630Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.7},{\"Stamp\":\"2025-07-08T12:25:58.247Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.726},{\"Stamp\":\"2025-07-08T12:25:58.837Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.8},{\"Stamp\":\"2025-07-08T12:25:59.407Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.913},{\"Stamp\":\"2025-07-08T12:26:00.120Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.04},{\"Stamp\":\"2025-07-08T12:26:00.663Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.189}]",
        "payloadType": "json",
        "x": 210,
        "y": 1560,
        "wires": [
            [
                "0bdbcb2aab9e05ba"
            ]
        ]
    },
    {
        "id": "78941b46bdde56bb",
        "type": "ui-group",
        "name": "Report",
        "page": "c9362b93aa48a81c",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "c9362b93aa48a81c",
        "type": "ui-page",
        "name": "Reporting",
        "ui": "0984762e823e159c",
        "path": "/Reporting",
        "icon": "home",
        "layout": "tabs",
        "theme": "8842e361403cacce",
        "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": "0984762e823e159c",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "notificationDisplayTime": 5
    },
    {
        "id": "8842e361403cacce",
        "type": "ui-theme",
        "name": "All Fill",
        "colors": {
            "surface": "#433d3d",
            "primary": "#ff4d00",
            "bgPage": "#918d8d",
            "groupBg": "#ffffff",
            "groupOutline": "#ff4d00"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 July 2025 14:28 UTC](https://discourse.nodered.org/t/trouble-displaying-chart-js-line-chart-on-dashboard-2-0/98052/2 "2025-07-09T14:28:11Z")

</div>

Any reason you are not using the built-in chart?

PS, to integrate with external dependencies (like chart.js), there is a specific pattern required. [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template#loading-external-dependencies)

Also, on that page (scroll to the top) is a **"Try Demo" button** that has an example of loading eCharts and populating them with data - you could copy/download that demo flow and adapt it for chartjs

Also, there is this demo: [How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259/4)

---

<div class="post-metadata">

**Author:** ![ShadyPhD](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@ShadyPhD](https://discourse.nodered.org/u/ShadyPhD)\
**Post date:** [9 July 2025 15:03 UTC](https://discourse.nodered.org/t/trouble-displaying-chart-js-line-chart-on-dashboard-2-0/98052/3 "2025-07-09T15:03:29Z")

</div>

Hey Steve,  
I was under the impression that the built in charts cannot map multiple y-axis values in this fashion. I have tried the regular line graph node but i was having trouble being able to manipulate the data in order to split each item into series and x/y.

I will look through the links you have included. Thank you for the reply!

---

<div class="post-metadata">

**Author:** ![ShadyPhD](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@ShadyPhD](https://discourse.nodered.org/u/ShadyPhD)\
**Post date:** [16 July 2025 11:58 UTC](https://discourse.nodered.org/t/trouble-displaying-chart-js-line-chart-on-dashboard-2-0/98052/4 "2025-07-16T11:58:42Z")

</div>

Steve,  
Just wanted to thank you again. After your questioning me for not using the built-in chart, i went back to the drawing board. I referred back to the chart documentation and utilized multiple items in the "series" designation field. works like a charm!

---

<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:** [15 August 2025 11:59 UTC](https://discourse.nodered.org/t/trouble-displaying-chart-js-line-chart-on-dashboard-2-0/98052/5 "2025-08-15T11:59:15Z")

</div>

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