Mixed bar and line chart

Hello,
I am having trouble to mix bar and line chart.
I have no trouble getting only bar or line chart only but when I tried to combine them it is not working.


This is what I'm trying to do but instead of yield I want Total output for Bar and Target Output as the line.

[
    {
        "id": "bb9f0674e767961b",
        "type": "inject",
        "z": "4e40fbd2a88aea91",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "10",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Fetch data",
        "payload": "",
        "payloadType": "date",
        "x": 180,
        "y": 160,
        "wires": [
            [
                "1126ebdf70946e27",
                "166dab3687d4ac2c"
            ]
        ]
    },
    {
        "id": "1126ebdf70946e27",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "function 8",
        "func": "msg.payload = \"SELECT TOP (8) TimeDate, AlarmName, Value, Action, TagName FROM dbo.Alarms ORDER BY TimeDate DESC\";\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 400,
        "y": 80,
        "wires": [
            [
                "f904c1045e625f7d"
            ]
        ]
    },
    {
        "id": "fb6f90abba60c543",
        "type": "ui-table",
        "z": "4e40fbd2a88aea91",
        "group": "87bd5593e055a322",
        "name": "Alarm",
        "label": "",
        "order": 1,
        "width": "0",
        "height": "0",
        "maxrows": "0",
        "passthru": false,
        "autocols": true,
        "showSearch": false,
        "deselect": true,
        "selectionType": "none",
        "columns": [],
        "mobileBreakpoint": "md",
        "mobileBreakpointType": "defaults",
        "action": "replace",
        "x": 790,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "f904c1045e625f7d",
        "type": "MSSQL",
        "z": "4e40fbd2a88aea91",
        "mssqlCN": "60c5e3d85f4c16dc",
        "name": "Alarm",
        "outField": "payload",
        "returnType": 0,
        "throwErrors": 1,
        "query": "",
        "modeOpt": "queryMode",
        "modeOptType": "query",
        "queryOpt": "payload",
        "queryOptType": "editor",
        "paramsOpt": "queryParams",
        "paramsOptType": "none",
        "rows": "rows",
        "rowsType": "msg",
        "parseMustache": true,
        "params": [],
        "x": 590,
        "y": 80,
        "wires": [
            [
                "fb6f90abba60c543"
            ]
        ]
    },
    {
        "id": "8ce8136ac3316ddc",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "function 14",
        "func": "msg.payload = \"SELECT TOP (1) RecipeName FROM dbo.Alarms ORDER BY TimeDate DESC\";\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 550,
        "y": 160,
        "wires": [
            [
                "e536d056e7b4ecbe"
            ]
        ]
    },
    {
        "id": "e536d056e7b4ecbe",
        "type": "MSSQL",
        "z": "4e40fbd2a88aea91",
        "mssqlCN": "60c5e3d85f4c16dc",
        "name": "Recipe",
        "outField": "payload",
        "returnType": 0,
        "throwErrors": 1,
        "query": "",
        "modeOpt": "queryMode",
        "modeOptType": "query",
        "queryOpt": "payload",
        "queryOptType": "editor",
        "paramsOpt": "queryParams",
        "paramsOptType": "none",
        "rows": "rows",
        "rowsType": "msg",
        "parseMustache": true,
        "params": [],
        "x": 720,
        "y": 160,
        "wires": [
            [
                "948da202abdb9f85"
            ]
        ]
    },
    {
        "id": "948da202abdb9f85",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "function 15",
        "func": "let recipe = \"N/A\"; // This will be used as the CP_Model for MariaDB lookup\nlet fullRecipeName = \"N/A\";\n\nif (msg.payload && Array.isArray(msg.payload) && msg.payload.length > 0) {\n    if (msg.payload[0] && typeof msg.payload[0].RecipeName === 'string') {\n        fullRecipeName = msg.payload[0].RecipeName;\n        // Extract the first part of the RecipeName to use as the lookup ID\n        recipe = fullRecipeName.split(' ')[0]; \n    }\n}\n\nmsg.payload = \"Model : \" + recipe;\n\nmsg.cpModelToLookup = recipe; \n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 890,
        "y": 160,
        "wires": [
            [
                "52a6eb2324cbd228",
                "7fe16e3597266f41",
                "bb1ea618e7d2c48e"
            ]
        ]
    },
    {
        "id": "52a6eb2324cbd228",
        "type": "ui-text",
        "z": "4e40fbd2a88aea91",
        "group": "1f528672fb91aed2",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "Recipe Name :",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-center",
        "style": true,
        "font": "Arial Black,Arial Black,Gadget,sans-serif",
        "fontSize": "35",
        "color": "#000000",
        "wrapText": false,
        "className": "",
        "x": 1160,
        "y": 160,
        "wires": []
    },
    {
        "id": "166dab3687d4ac2c",
        "type": "delay",
        "z": "4e40fbd2a88aea91",
        "name": "",
        "pauseType": "delay",
        "timeout": "1",
        "timeoutUnits": "seconds",
        "rate": "1",
        "nbRateUnits": "1",
        "rateUnits": "second",
        "randomFirst": "1",
        "randomLast": "5",
        "randomUnits": "seconds",
        "drop": false,
        "allowrate": false,
        "outputs": 1,
        "x": 380,
        "y": 160,
        "wires": [
            [
                "8ce8136ac3316ddc"
            ]
        ]
    },
    {
        "id": "7fe16e3597266f41",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Prepare MariaDB Query",
        "func": "const cpModelFromMSSQL = msg.cpModelToLookup; \n\nif (cpModelFromMSSQL && cpModelFromMSSQL !== \"N/A\") {\n    const cleanedLookupValue = cpModelFromMSSQL.replace('-', '');\n\n    msg.topic = `\n        SELECT CP_Model, Run_Rate_ADS, Committed_Output_Shift\n        FROM uph_analysis \n        WHERE REPLACE(CP_Model, '-', '') = '${cleanedLookupValue}';\n    `;\n    \n    msg.cleanedLookupValue = cleanedLookupValue;\n\n} else {\n    node.warn(\"CP Model to lookup in MariaDB is N/A or missing. Skipping MariaDB query.\");\n    msg.topic = \"\"; \n    return null; \n}\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1110,
        "y": 220,
        "wires": [
            [
                "26e619e4003ed1f6"
            ]
        ]
    },
    {
        "id": "26e619e4003ed1f6",
        "type": "mysql",
        "z": "4e40fbd2a88aea91",
        "mydb": "6ef2625909603909",
        "name": "Maria",
        "x": 1350,
        "y": 220,
        "wires": [
            [
                "5c8762eb277310c4",
                "9b6099afc152fc34",
                "5e5ea5b53d5127ac"
            ]
        ]
    },
    {
        "id": "5c8762eb277310c4",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Format Target Speed",
        "func": "const mariaDbData = msg.payload; // Result from MariaDB\nconst lookedUpModel = msg.cpModelToLookup; // The model we searched for (set by \"function 15\")\n\nif (mariaDbData && Array.isArray(mariaDbData) && mariaDbData.length > 0) {\n    const result = mariaDbData[0]; // Assuming CP_Model is unique\n    msg.payload = \"Target Speed: \" + (result.Run_Rate_ADS !== null ? result.Run_Rate_ADS : \"N/A\");\n} else {\n    msg.payload = `Target Speed: N/A (for ${lookedUpModel})`;\n}\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1560,
        "y": 220,
        "wires": [
            [
                "f2c161a882100432"
            ]
        ]
    },
    {
        "id": "9b6099afc152fc34",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Format Target Output",
        "func": "const mariaDbData = msg.payload;\nconst lookedUpModel = msg.cpModelToLookup;\nlet targetOutputForDisplay = \"N/A\";\nlet numericTargetOutput = null;\n\nif (mariaDbData && Array.isArray(mariaDbData) && mariaDbData.length > 0) {\n    const result = mariaDbData[0];\n    if (result.Committed_Output_Shift !== null && typeof result.Committed_Output_Shift === 'number') {\n        numericTargetOutput = result.Committed_Output_Shift;\n        targetOutputForDisplay = numericTargetOutput.toLocaleString('en-US');\n    }\n}\n\nflow.set(\"currentHourlyTarget\", numericTargetOutput);\n\nif (numericTargetOutput !== null) {\n    msg.payload = \"Target Output: \" + targetOutputForDisplay;\n} else {\n    msg.payload = `Target Output: N/A (for ${lookedUpModel})`;\n}\nreturn msg;\n/*const mariaDbData = msg.payload; \nconst lookedUpModel = msg.cpModelToLookup;\n\nif (mariaDbData && Array.isArray(mariaDbData) && mariaDbData.length > 0) {\n    const result = mariaDbData[0];\n    let output = \"N/A\";\n    if (result.Committed_Output_Shift !== null && typeof result.Committed_Output_Shift === 'number') {\n        output = result.Committed_Output_Shift.toLocaleString('en-US');\n    }\n    msg.payload = \"Target Output: \" + output;\n} else {\n    msg.payload = `Target Output: N/A (for ${lookedUpModel})`;\n}\nreturn msg;*/",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1560,
        "y": 300,
        "wires": [
            [
                "cc0edc1155221834"
            ]
        ]
    },
    {
        "id": "f2c161a882100432",
        "type": "ui-text",
        "z": "4e40fbd2a88aea91",
        "group": "1f528672fb91aed2",
        "order": 7,
        "width": 0,
        "height": 0,
        "name": "Target Speed",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-center",
        "style": true,
        "font": "",
        "fontSize": "35",
        "color": "#000000",
        "wrapText": false,
        "className": "",
        "x": 1830,
        "y": 220,
        "wires": []
    },
    {
        "id": "cc0edc1155221834",
        "type": "ui-text",
        "z": "4e40fbd2a88aea91",
        "group": "1f528672fb91aed2",
        "order": 9,
        "width": 0,
        "height": 0,
        "name": "Target Output",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-center",
        "style": true,
        "font": "",
        "fontSize": "35",
        "color": "#000000",
        "wrapText": false,
        "className": "",
        "x": 1820,
        "y": 300,
        "wires": []
    },
    {
        "id": "079254a340d8e511",
        "type": "debug",
        "z": "4e40fbd2a88aea91",
        "name": "debug 13",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1040,
        "y": 560,
        "wires": []
    },
    {
        "id": "auto_inject_trigger_01",
        "type": "inject",
        "z": "4e40fbd2a88aea91",
        "name": "Daily Total ",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "900",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "triggerAutoDailyTotal",
        "payload": "",
        "payloadType": "date",
        "x": 210,
        "y": 500,
        "wires": [
            [
                "auto_func_set_date_sql_01"
            ]
        ]
    },
    {
        "id": "auto_func_set_date_sql_01",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Set Current UTC Date & SQL",
        "func": "const now = new Date();\n\nconst year = now.getUTCFullYear();\nconst month_0idx = now.getUTCMonth();\nconst day = now.getUTCDate();\n\nconst reportDateUTCObj = new Date(Date.UTC(year, month_0idx, day, 0, 0, 0, 0));\n\nconst dateForQuery = reportDateUTCObj.getUTCFullYear() + '-' +\n    (reportDateUTCObj.getUTCMonth() + 1).toString().padStart(2, '0') + '-' +\n    reportDateUTCObj.getUTCDate().toString().padStart(2, '0');\n\nconst startTimeSQL = `${dateForQuery} 00:00:00.000`;\nconst endTimeSQL = `${dateForQuery} 23:59:59.999`;\n\nmsg.payload = `\n    SELECT\n    [Time],\n    SUM(Total) AS Total \nFROM\n    dbo.batch\nWHERE\n    [Time] >= CONVERT(datetime, '${startTimeSQL}', 120)\n    AND [Time] <= CONVERT(datetime, '${endTimeSQL}', 120)\nGROUP BY\n    [Time]\nORDER BY\n    [Time] ASC;\n`;\n\nmsg.reportDateForUTCDay = reportDateUTCObj; \nconst displayDateForStatus = reportDateUTCObj.toLocaleDateString('en-GB', { timeZone: 'UTC' });\n\nnode.log(\"AutoDailyTotal: Querying for \" + displayDateForStatus + \" (UTC Day)\");\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 500,
        "wires": [
            [
                "auto_mssql_data_01"
            ]
        ]
    },
    {
        "id": "auto_mssql_data_01",
        "type": "MSSQL",
        "z": "4e40fbd2a88aea91",
        "mssqlCN": "8baf7e1e28030a6d",
        "name": "Get Current Day Data",
        "outField": "payload",
        "returnType": 0,
        "throwErrors": "1",
        "query": "",
        "modeOpt": "queryMode",
        "modeOptType": "query",
        "queryOpt": "payload",
        "queryOptType": "editor",
        "paramsOpt": "queryParams",
        "paramsOptType": "none",
        "rows": "",
        "rowsType": "msg",
        "parseMustache": true,
        "params": [],
        "x": 740,
        "y": 500,
        "wires": [
            [
                "auto_func_calculate_sum_01",
                "079254a340d8e511",
                "36f6f7e1b733d31b"
            ]
        ]
    },
    {
        "id": "auto_func_calculate_sum_01",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Calc Auto Daily Sum (7AM-7PM UTC)",
        "func": "const batchData = msg.payload;\nconst reportDateUTCObjInput = msg.reportDateForUTCDay;\n\nlet reportDateStringForDisplay = \"an unspecified UTC date\";\nlet reportDateUTCObj = null;\n\nif (reportDateUTCObjInput) {\n    reportDateUTCObj = new Date(reportDateUTCObjInput);\n    if (isNaN(reportDateUTCObj.getTime())) {\n        reportDateUTCObj = null;\n    } else {\n        reportDateStringForDisplay = reportDateUTCObj.toLocaleDateString('en-GB', { timeZone: 'UTC' });\n    }\n}\n\nif (!reportDateUTCObj) {\n    msg.payload = \"Today's Total (7AM-7PM UTC): Error - Date Invalid\";\n    node.warn(\"AutoDailySum Calc: Invalid date object received.\");\n    return msg;\n}\n\nif (!Array.isArray(batchData)) {\n    node.warn(\"AutoDailySum Calc: Input batchData is not an array for \" + reportDateStringForDisplay + \" (UTC).\");\n    msg.payload = \"Today's Total (7AM-7PM UTC) for \" + reportDateStringForDisplay + \": Error fetching data\";\n    return msg;\n}\n\nlet dailyTotalOutputSum = 0;\nlet dataFoundInTimeRange = false;\n\nbatchData.forEach((item, index) => {\n    if (!item || typeof item.Time === 'undefined' || item.Total === null || typeof item.Total === 'undefined') {\n        return;\n    }\n    const itemTime = new Date(item.Time);\n    if (isNaN(itemTime.getTime())) {\n        return;\n    }\n\n    // SQL already filters by day, but double-check for safety if needed (usually not with this setup)\n    // if (itemTime.getUTCFullYear() !== reportDateUTCObj.getUTCFullYear() || ... ) return;\n\n    const itemHourUTC = itemTime.getUTCHours();\n    const itemTotal = parseFloat(item.Total);\n\n    if (itemHourUTC >= 7 && itemHourUTC < 19) { // Sum for 07:00 UTC to 18:59 UTC\n        if (!isNaN(itemTotal)) {\n            dailyTotalOutputSum += itemTotal;\n            dataFoundInTimeRange = true;\n        }\n    }\n});\n\nlet dailyTotalString;\nif (batchData.length === 0 && !dataFoundInTimeRange) { // No data returned from SQL at all for the day\n    dailyTotalString = \"Current Output: No data\";\n} else if (!dataFoundInTimeRange) { // Data existed for the day, but none in the 7AM-7PM range\n    dailyTotalString = \"Current Output: 0\";\n} else {\n    dailyTotalString = \"Current Output: \" + dailyTotalOutputSum.toLocaleString();\n}\n\nmsg.payload = dailyTotalString;\nnode.log(\"AutoDailySum Calc: \" + msg.payload);\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1050,
        "y": 500,
        "wires": [
            [
                "78a071dec8d0aca5"
            ]
        ]
    },
    {
        "id": "78a071dec8d0aca5",
        "type": "ui-text",
        "z": "4e40fbd2a88aea91",
        "group": "1f528672fb91aed2",
        "order": 8,
        "width": 0,
        "height": 0,
        "name": "Output",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-center",
        "style": true,
        "font": "",
        "fontSize": "35",
        "color": "#000000",
        "wrapText": false,
        "className": "",
        "x": 1310,
        "y": 500,
        "wires": []
    },
    {
        "id": "36f6f7e1b733d31b",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Daily Hourly Chart Data",
        "func": "const rawData = msg.payload;\n\n// --- Logic for data preparation ---\nif (!Array.isArray(rawData)) {\n    node.status({ fill: \"red\", shape: \"ring\", text: \"Input data is not an array\" });\n    // For Dashboard 2.0 ui-chart, send an empty valid structure\n    msg.payload = { data: { labels: [], datasets: [] }, options: {} };\n    return msg;\n}\n\nconst hourlyTotals = {};\nconst desiredHoursUTC = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];\nconst xLabels = [\n    \"7AM-8AM\", \"8AM-9AM\", \"9AM-10AM\", \"10AM-11AM\",\n    \"11AM-12PM\", \"12PM-1PM\", \"1PM-2PM\", \"2PM-3PM\",\n    \"3PM-4PM\", \"4PM-5PM\", \"5PM-6PM\", \"6PM-7PM\"\n];\n\ndesiredHoursUTC.forEach(hour => {\n    hourlyTotals[hour] = 0;\n});\n\nlet dataFoundForChart = false;\nrawData.forEach(item => {\n    if (!item || typeof item.Time === 'undefined' || item.Total === null || typeof item.Total === 'undefined') {\n        return;\n    }\n    const itemTime = new Date(item.Time);\n    if (isNaN(itemTime.getTime())) {\n        return;\n    }\n    const itemHourUTC = itemTime.getUTCHours();\n    if (itemHourUTC >= 7 && itemHourUTC < 19) { // UTC 7:00 to 18:59\n        const itemTotal = parseFloat(item.Total);\n        if (!isNaN(itemTotal)) {\n            if (hourlyTotals.hasOwnProperty(itemHourUTC)) {\n                hourlyTotals[itemHourUTC] += itemTotal;\n                dataFoundForChart = true;\n            }\n        }\n    }\n});\n\nconst actualOutputValues = [];\ndesiredHoursUTC.forEach(hour => {\n    actualOutputValues.push(hourlyTotals[hour]);\n});\n\nconst committedHourlyTarget = flow.get(\"currentHourlyTarget\");\nlet targetOutputValues = new Array(xLabels.length).fill(null); // Default to null if no target\n\nif (committedHourlyTarget !== null && typeof committedHourlyTarget === 'number' && !isNaN(committedHourlyTarget)) {\n    targetOutputValues = new Array(xLabels.length).fill(committedHourlyTarget);\n}\n\nif (!dataFoundForChart && rawData.length > 0 && committedHourlyTarget === null) {\n    node.status({ fill: \"yellow\", shape: \"ring\", text: \"Actuals out of range, no target\" });\n} else if (!dataFoundForChart && committedHourlyTarget === null) {\n    node.status({ fill: \"yellow\", shape: \"ring\", text: \"No actuals data, no target\" });\n} else {\n    node.status({ fill: \"green\", shape: \"dot\", text: \"Combined chart data prepared\" });\n}\n\n// --- Structure for node-red-dashboard-2.0 ui-chart node ---\nmsg.payload = {\n    data: {\n        labels: xLabels,\n        datasets: [\n            {\n                label: \"Hourly Output\", // BAR chart\n                data: actualOutputValues,\n                type: 'bar',\n                backgroundColor: 'rgba(54, 162, 235, 0.5)', // Blue\n                borderColor: 'rgb(54, 162, 235)',\n                borderWidth: 1,\n                yAxisID: 'yBar'\n            },\n            {\n                label: \"Target Output\", // LINE chart\n                data: targetOutputValues,\n                type: 'line',\n                fill: false,\n                borderColor: 'rgb(255, 99, 132)', // Red\n                tension: 0.1,\n                yAxisID: 'yLine'\n            }\n        ]\n    },\n        options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        interaction: {\n            mode: 'index',\n            intersect: false,\n        },\n        stacked: false,\n        plugins: {\n            title: {\n                display: true,\n                text: 'Hourly Output vs. Target Output (7AM-7PM UTC)'\n            },\n            legend: {\n                position: 'top',\n            }\n        },\n        scales: {\n            x: {\n                display: true,\n                title: {\n                    display: false,\n                    text: 'Time Slot'\n                }\n            },\n            yBar: {\n                type: 'linear',\n                display: true,\n                position: 'left',\n                title: {\n                    display: true,\n                    text: 'Hourly Output'\n                },\n                beginAtZero: true\n            },\n            yLine: {\n                type: 'linear',\n                display: true,\n                position: 'right',\n                title: {\n                    display: true,\n                    text: 'Target Output'\n                },\n                grid: {\n                    drawOnChartArea: false,\n                },\n                beginAtZero: true\n            }\n        }\n    }\n};\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1030,
        "y": 680,
        "wires": [
            [
                "83683e185f1fee62"
            ]
        ]
    },
    {
        "id": "83683e185f1fee62",
        "type": "ui-chart",
        "z": "4e40fbd2a88aea91",
        "group": "efa1b65e2985d6df",
        "name": "Hourly Bar Chart",
        "label": "Output",
        "order": 6,
        "chartType": "bar",
        "category": "Hourly Output",
        "categoryType": "str",
        "xAxisLabel": "Time Slot",
        "xAxisProperty": "timeSlotLabel",
        "xAxisPropertyType": "property",
        "xAxisType": "category",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "Total Output",
        "yAxisProperty": "actualOutputValue",
        "yAxisPropertyType": "property",
        "ymin": "0",
        "ymax": "",
        "bins": 10,
        "action": "replace",
        "stackSeries": false,
        "pointShape": "line",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": "20",
        "removeOlderUnit": "60",
        "removeOlderPoints": "",
        "colors": [
            "#ff0000",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#000000"
        ],
        "textColorDefault": false,
        "gridColor": [
            "#000000"
        ],
        "gridColorDefault": false,
        "width": "12",
        "height": "19",
        "className": "",
        "interpolation": "linear",
        "x": 1330,
        "y": 680,
        "wires": [
            [
                "40425edfe5540368"
            ]
        ]
    },
    {
        "id": "40425edfe5540368",
        "type": "debug",
        "z": "4e40fbd2a88aea91",
        "name": "debug 9",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1660,
        "y": 680,
        "wires": []
    },
    {
        "id": "5e5ea5b53d5127ac",
        "type": "debug",
        "z": "4e40fbd2a88aea91",
        "name": "debug 4",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1540,
        "y": 360,
        "wires": []
    },
    {
        "id": "bb1ea618e7d2c48e",
        "type": "debug",
        "z": "4e40fbd2a88aea91",
        "name": "debug 10",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1080,
        "y": 300,
        "wires": []
    },
    {
        "id": "87bd5593e055a322",
        "type": "ui-group",
        "name": "Alarm",
        "page": "36d8747804871232",
        "width": "6",
        "height": 1,
        "order": 2,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "60c5e3d85f4c16dc",
        "type": "MSSQL-CN",
        "tdsVersion": "7_4",
        "name": "HMI",
        "server": "10.183.175.8",
        "port": "1433",
        "encyption": true,
        "trustServerCertificate": true,
        "database": "HMI",
        "useUTC": true,
        "connectTimeout": "15000",
        "requestTimeout": "15000",
        "cancelTimeout": "5000",
        "pool": "5",
        "parseJSON": false,
        "enableArithAbort": true,
        "readOnlyIntent": false
    },
    {
        "id": "1f528672fb91aed2",
        "type": "ui-group",
        "name": "Delta SA 03",
        "page": "8ad4c897bc98235a",
        "width": "4",
        "height": 1,
        "order": 3,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "6ef2625909603909",
        "type": "MySQLdatabase",
        "name": "",
        "host": "127.0.0.1",
        "port": "3306",
        "db": "my_google_data",
        "tz": "",
        "charset": "UTF8"
    },
    {
        "id": "8baf7e1e28030a6d",
        "type": "MSSQL-CN",
        "tdsVersion": "7_4",
        "name": "i4.0",
        "server": "10.183.175.8",
        "port": "1433",
        "encyption": true,
        "trustServerCertificate": true,
        "database": "i4.0",
        "useUTC": true,
        "connectTimeout": "15000",
        "requestTimeout": "15000",
        "cancelTimeout": "5000",
        "pool": "5",
        "parseJSON": false,
        "enableArithAbort": true,
        "readOnlyIntent": false
    },
    {
        "id": "efa1b65e2985d6df",
        "type": "ui-group",
        "name": "Total Output and Average Yield",
        "page": "36d8747804871232",
        "width": "12",
        "height": 1,
        "order": 13,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "36d8747804871232",
        "type": "ui-page",
        "name": "Delta SA 03",
        "ui": "e37b297fa64e1312",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "8796486dd6098e1f",
        "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": 4,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "8ad4c897bc98235a",
        "type": "ui-page",
        "name": "Main Page",
        "ui": "e37b297fa64e1312",
        "path": "/page3",
        "icon": "home",
        "layout": "grid",
        "theme": "8796486dd6098e1f",
        "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": "e37b297fa64e1312",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-text",
            "ui-text-input"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "fixed",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "8796486dd6098e1f",
        "type": "ui-theme",
        "name": "Theme 2",
        "colors": {
            "surface": "#0f0f0f",
            "primary": "#050505",
            "bgPage": "#767474",
            "groupBg": "#d8d4d4",
            "groupOutline": "#ffffff"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "4px",
            "groupBorderRadius": "4px",
            "widgetGap": "1px"
        }
    }
]

I tried to use only ui_template and but it just came out blank.
Any suggestion would be appreciated

I tried using the template node

[
    {
        "id": "079254a340d8e511",
        "type": "debug",
        "z": "4e40fbd2a88aea91",
        "name": "debug 13",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1040,
        "y": 560,
        "wires": []
    },
    {
        "id": "auto_inject_trigger_01",
        "type": "inject",
        "z": "4e40fbd2a88aea91",
        "name": "Daily Total ",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "900",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "triggerAutoDailyTotal",
        "payload": "",
        "payloadType": "date",
        "x": 210,
        "y": 500,
        "wires": [
            [
                "auto_func_set_date_sql_01"
            ]
        ]
    },
    {
        "id": "auto_func_set_date_sql_01",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Set Current UTC Date & SQL",
        "func": "const now = new Date();\n\nconst year = now.getUTCFullYear();\nconst month_0idx = now.getUTCMonth();\nconst day = now.getUTCDate();\n\nconst reportDateUTCObj = new Date(Date.UTC(year, month_0idx, day, 0, 0, 0, 0));\n\nconst dateForQuery = reportDateUTCObj.getUTCFullYear() + '-' +\n    (reportDateUTCObj.getUTCMonth() + 1).toString().padStart(2, '0') + '-' +\n    reportDateUTCObj.getUTCDate().toString().padStart(2, '0');\n\nconst startTimeSQL = `${dateForQuery} 00:00:00.000`;\nconst endTimeSQL = `${dateForQuery} 23:59:59.999`;\n\nmsg.payload = `\n    SELECT\n    [Time],\n    SUM(Total) AS Total \nFROM\n    dbo.batch\nWHERE\n    [Time] >= CONVERT(datetime, '${startTimeSQL}', 120)\n    AND [Time] <= CONVERT(datetime, '${endTimeSQL}', 120)\nGROUP BY\n    [Time]\nORDER BY\n    [Time] ASC;\n`;\n\nmsg.reportDateForUTCDay = reportDateUTCObj; \nconst displayDateForStatus = reportDateUTCObj.toLocaleDateString('en-GB', { timeZone: 'UTC' });\n\nnode.log(\"AutoDailyTotal: Querying for \" + displayDateForStatus + \" (UTC Day)\");\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 500,
        "wires": [
            [
                "auto_mssql_data_01"
            ]
        ]
    },
    {
        "id": "auto_mssql_data_01",
        "type": "MSSQL",
        "z": "4e40fbd2a88aea91",
        "mssqlCN": "8baf7e1e28030a6d",
        "name": "Get Current Day Data",
        "outField": "payload",
        "returnType": 0,
        "throwErrors": "1",
        "query": "",
        "modeOpt": "queryMode",
        "modeOptType": "query",
        "queryOpt": "payload",
        "queryOptType": "editor",
        "paramsOpt": "queryParams",
        "paramsOptType": "none",
        "rows": "",
        "rowsType": "msg",
        "parseMustache": true,
        "params": [],
        "x": 740,
        "y": 500,
        "wires": [
            [
                "auto_func_calculate_sum_01",
                "079254a340d8e511",
                "36f6f7e1b733d31b"
            ]
        ]
    },
    {
        "id": "auto_func_calculate_sum_01",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Calc Auto Daily Sum (7AM-7PM UTC)",
        "func": "const batchData = msg.payload;\nconst reportDateUTCObjInput = msg.reportDateForUTCDay;\n\nlet reportDateStringForDisplay = \"an unspecified UTC date\";\nlet reportDateUTCObj = null;\n\nif (reportDateUTCObjInput) {\n    reportDateUTCObj = new Date(reportDateUTCObjInput);\n    if (isNaN(reportDateUTCObj.getTime())) {\n        reportDateUTCObj = null;\n    } else {\n        reportDateStringForDisplay = reportDateUTCObj.toLocaleDateString('en-GB', { timeZone: 'UTC' });\n    }\n}\n\nif (!reportDateUTCObj) {\n    msg.payload = \"Today's Total (7AM-7PM UTC): Error - Date Invalid\";\n    node.warn(\"AutoDailySum Calc: Invalid date object received.\");\n    return msg;\n}\n\nif (!Array.isArray(batchData)) {\n    node.warn(\"AutoDailySum Calc: Input batchData is not an array for \" + reportDateStringForDisplay + \" (UTC).\");\n    msg.payload = \"Today's Total (7AM-7PM UTC) for \" + reportDateStringForDisplay + \": Error fetching data\";\n    return msg;\n}\n\nlet dailyTotalOutputSum = 0;\nlet dataFoundInTimeRange = false;\n\nbatchData.forEach((item, index) => {\n    if (!item || typeof item.Time === 'undefined' || item.Total === null || typeof item.Total === 'undefined') {\n        return;\n    }\n    const itemTime = new Date(item.Time);\n    if (isNaN(itemTime.getTime())) {\n        return;\n    }\n\n    // SQL already filters by day, but double-check for safety if needed (usually not with this setup)\n    // if (itemTime.getUTCFullYear() !== reportDateUTCObj.getUTCFullYear() || ... ) return;\n\n    const itemHourUTC = itemTime.getUTCHours();\n    const itemTotal = parseFloat(item.Total);\n\n    if (itemHourUTC >= 7 && itemHourUTC < 19) { // Sum for 07:00 UTC to 18:59 UTC\n        if (!isNaN(itemTotal)) {\n            dailyTotalOutputSum += itemTotal;\n            dataFoundInTimeRange = true;\n        }\n    }\n});\n\nlet dailyTotalString;\nif (batchData.length === 0 && !dataFoundInTimeRange) { // No data returned from SQL at all for the day\n    dailyTotalString = \"Current Output: No data\";\n} else if (!dataFoundInTimeRange) { // Data existed for the day, but none in the 7AM-7PM range\n    dailyTotalString = \"Current Output: 0\";\n} else {\n    dailyTotalString = \"Current Output: \" + dailyTotalOutputSum.toLocaleString();\n}\n\nmsg.payload = dailyTotalString;\nnode.log(\"AutoDailySum Calc: \" + msg.payload);\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1050,
        "y": 500,
        "wires": [
            [
                "78a071dec8d0aca5"
            ]
        ]
    },
    {
        "id": "78a071dec8d0aca5",
        "type": "ui-text",
        "z": "4e40fbd2a88aea91",
        "group": "1f528672fb91aed2",
        "order": 8,
        "width": 0,
        "height": 0,
        "name": "Output",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-center",
        "style": true,
        "font": "",
        "fontSize": "35",
        "color": "#000000",
        "wrapText": false,
        "className": "",
        "x": 1310,
        "y": 500,
        "wires": []
    },
    {
        "id": "36f6f7e1b733d31b",
        "type": "function",
        "z": "4e40fbd2a88aea91",
        "name": "Daily Hourly Chart Data",
        "func": "const rawData = msg.payload;\n\n// --- Logic for data preparation (same core logic as before) ---\nif (!Array.isArray(rawData)) {\n    node.status({ fill: \"red\", shape: \"ring\", text: \"Input data is not an array\" });\n    // Send empty data for the template to handle\n    msg.payload = { labels: [], datasets: [] };\n    msg.options = {\n        plugins: { title: { display: true, text: 'Hourly Output vs. Target (Data Error)' } }\n    };\n    return msg;\n}\n\nconst hourlyTotals = {};\nconst desiredHoursUTC = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];\nconst xLabels = [\n    \"7AM-8AM\", \"8AM-9AM\", \"9AM-10AM\", \"10AM-11AM\",\n    \"11AM-12PM\", \"12PM-1PM\", \"1PM-2PM\", \"2PM-3PM\",\n    \"3PM-4PM\", \"4PM-5PM\", \"5PM-6PM\", \"6PM-7PM\"\n];\n\ndesiredHoursUTC.forEach(hour => {\n    hourlyTotals[hour] = 0;\n});\n\nlet dataFoundForChart = false;\nrawData.forEach(item => {\n    if (!item || typeof item.Time === 'undefined' || item.Total === null || typeof item.Total === 'undefined') {\n        return;\n    }\n    const itemTime = new Date(item.Time);\n    if (isNaN(itemTime.getTime())) {\n        return;\n    }\n    const itemHourUTC = itemTime.getUTCHours();\n    if (itemHourUTC >= 7 && itemHourUTC < 19) { // UTC 7:00 to 18:59\n        const itemTotal = parseFloat(item.Total);\n        if (!isNaN(itemTotal)) {\n            if (hourlyTotals.hasOwnProperty(itemHourUTC)) {\n                hourlyTotals[itemHourUTC] += itemTotal;\n                dataFoundForChart = true;\n            }\n        }\n    }\n});\n\nconst actualOutputValues = [];\ndesiredHoursUTC.forEach(hour => {\n    actualOutputValues.push(hourlyTotals[hour]);\n});\n\nconst committedHourlyTarget = flow.get(\"currentHourlyTarget\");\nlet targetOutputValues = new Array(xLabels.length).fill(null);\n\nif (committedHourlyTarget !== null && typeof committedHourlyTarget === 'number' && !isNaN(committedHourlyTarget)) {\n    targetOutputValues = new Array(xLabels.length).fill(committedHourlyTarget);\n}\n\nif (!dataFoundForChart && rawData.length > 0 && committedHourlyTarget === null) {\n    node.status({ fill: \"yellow\", shape: \"ring\", text: \"Actuals out of range, no target\" });\n} else if (!dataFoundForChart && committedHourlyTarget === null) {\n    node.status({ fill: \"yellow\", shape: \"ring\", text: \"No actuals data, no target\" });\n} else {\n    node.status({ fill: \"green\", shape: \"dot\", text: \"Combined chart data prepared\" });\n}\nmsg.payload = {\n    labels: xLabels,\n    datasets: [\n        {\n            label: \"Hourly Output\", // BAR chart\n            data: actualOutputValues,\n            type: 'bar',\n            backgroundColor: 'rgba(54, 162, 235, 0.5)', // Blue\n            borderColor: 'rgb(54, 162, 235)',\n            borderWidth: 1,\n            yAxisID: 'yBar'\n        },\n        {\n            label: \"Target Output\", // LINE chart\n            data: targetOutputValues,\n            type: 'line',\n            fill: false,\n            borderColor: 'rgb(255, 99, 132)', // Red\n            tension: 0.1,\n            yAxisID: 'yLine'\n        }\n    ]\n};\n\nmsg.options = { // Chart.js options\n    responsive: true,\n    maintainAspectRatio: false,\n    interaction: {\n        mode: 'index',\n        intersect: false,\n    },\n    stacked: false,\n    plugins: {\n        title: {\n            display: true,\n            text: 'Hourly Output vs. Target Output (7AM-7PM UTC)'\n        },\n        legend: {\n            position: 'top',\n        }\n    },\n    scales: {\n        x: {\n            display: true,\n            title: {\n                display: false,\n                text: 'Time Slot'\n            }\n        },\n        yBar: {\n            type: 'linear',\n            display: true,\n            position: 'left',\n            title: {\n                display: true,\n                text: 'Hourly Output'\n            },\n            beginAtZero: true\n        },\n        yLine: {\n            type: 'linear',\n            display: true,\n            position: 'right',\n            title: {\n                display: true,\n                text: 'Target Output'\n            },\n            grid: {\n                drawOnChartArea: false,\n            },\n            beginAtZero: true\n        }\n    }\n};\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1030,
        "y": 680,
        "wires": [
            [
                "47dc19ff18262555"
            ]
        ]
    },
    {
        "id": "40425edfe5540368",
        "type": "debug",
        "z": "4e40fbd2a88aea91",
        "name": "debug 9",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1660,
        "y": 680,
        "wires": []
    },
    {
        "id": "47dc19ff18262555",
        "type": "ui-template",
        "z": "4e40fbd2a88aea91",
        "group": "efa1b65e2985d6df",
        "page": "",
        "ui": "",
        "name": "",
        "order": 0,
        "width": "12",
        "height": "12",
        "head": "",
        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js\"></script>\n\n<div style=\"width: 100%; height: 100%; position: relative;\">\n    <canvas id=\"mixedChart_{{$id}}\"></canvas>\n</div>\n\n<script>\n(function(scope) {\n    let myChartInstance = null;\n    const canvasId = \"mixedChart_\" + scope.$id;\n\n    // Function to create or update the chart\n    function updateChart(msg) {\n        const ctx = document.getElementById(canvasId);\n        if (!ctx) {\n            // If canvas isn't ready, try again shortly. This can happen on initial load.\n            setTimeout(() => updateChart(msg), 50);\n            return;\n        }\n\n        // Destroy previous chart instance if it exists\n        if (myChartInstance) {\n            myChartInstance.destroy();\n            myChartInstance = null;\n        }\n\n        if (msg && msg.payload && msg.payload.datasets && msg.payload.labels) {\n            const chartData = {\n                labels: msg.payload.labels,\n                datasets: msg.payload.datasets\n            };\n\n            // Use msg.options if provided, otherwise use some basic defaults\n            const chartOptions = msg.options || {\n                responsive: true,\n                maintainAspectRatio: false,\n                plugins: {\n                    legend: { position: 'top' },\n                    title: { display: true, text: 'Chart' }\n                },\n                scales: {\n                    x: { display: true },\n                    y: { type: 'linear', display: true, position: 'left', beginAtZero: true }\n                }\n            };\n\n            try {\n                myChartInstance = new Chart(ctx, {\n                    // Type is defined per dataset for mixed charts, so no global type here.\n                    data: chartData,\n                    options: chartOptions\n                });\n            } catch (e) {\n                console.error(\"Error creating chart:\", e);\n                // Optionally, send an error message back to Node-RED if needed\n                // if (scope.send) {\n                //     scope.send({payload: \"Error creating chart: \" + e.message});\n                // }\n            }\n        } else if (msg && msg.payload === null) {\n            // If payload is explicitly null, clear the chart\n            const context = ctx.getContext('2d');\n            context.clearRect(0, 0, ctx.width, ctx.height);\n            if (scope.send) {\n                 scope.send({payload: \"Chart cleared due to null payload\"});\n            }\n        } else {\n            // No valid data to draw\n             console.log(\"No valid data received for chart \" + canvasId);\n        }\n    }\n\n    // Watch for incoming messages\n    scope.$watch('msg', function(msg) {\n        if (msg) {\n            updateChart(msg);\n        }\n    });\n\n    // Clean up when the template is destroyed\n    scope.$on('$destroy', function() {\n        if (myChartInstance) {\n            myChartInstance.destroy();\n            myChartInstance = null;\n        }\n    });\n\n})(scope);\n</script>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1340,
        "y": 680,
        "wires": [
            [
                "40425edfe5540368"
            ]
        ]
    },
    {
        "id": "8baf7e1e28030a6d",
        "type": "MSSQL-CN",
        "tdsVersion": "7_4",
        "name": "i4.0",
        "server": "10.183.175.8",
        "port": "1433",
        "encyption": true,
        "trustServerCertificate": true,
        "database": "i4.0",
        "useUTC": true,
        "connectTimeout": "15000",
        "requestTimeout": "15000",
        "cancelTimeout": "5000",
        "pool": "5",
        "parseJSON": false,
        "enableArithAbort": true,
        "readOnlyIntent": false
    },
    {
        "id": "1f528672fb91aed2",
        "type": "ui-group",
        "name": "Delta SA 03",
        "page": "8ad4c897bc98235a",
        "width": "4",
        "height": 1,
        "order": 3,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "efa1b65e2985d6df",
        "type": "ui-group",
        "name": "Total Output and Average Yield",
        "page": "36d8747804871232",
        "width": "12",
        "height": 1,
        "order": 13,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "8ad4c897bc98235a",
        "type": "ui-page",
        "name": "Main Page",
        "ui": "e37b297fa64e1312",
        "path": "/page3",
        "icon": "home",
        "layout": "grid",
        "theme": "8796486dd6098e1f",
        "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": "36d8747804871232",
        "type": "ui-page",
        "name": "Delta SA 03",
        "ui": "e37b297fa64e1312",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "8796486dd6098e1f",
        "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": 4,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "e37b297fa64e1312",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-text",
            "ui-text-input"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "fixed",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "8796486dd6098e1f",
        "type": "ui-theme",
        "name": "Theme 2",
        "colors": {
            "surface": "#0f0f0f",
            "primary": "#050505",
            "bgPage": "#767474",
            "groupBg": "#d8d4d4",
            "groupOutline": "#ffffff"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "4px",
            "groupBorderRadius": "4px",
            "widgetGap": "1px"
        }
    }
]

The debug output I think tells me that it worker. But the dashboard is still blank

{"labels":["7AM-8AM","8AM-9AM","9AM-10AM","10AM-11AM","11AM-12PM","12PM-1PM","1PM-2PM","2PM-3PM","3PM-4PM","4PM-5PM","5PM-6PM","6PM-7PM"],"datasets":[{"label":"Hourly Output","data":[0,0,22692,59852,179892,0,179928,59948,64648,0,0,0],"type":"bar","backgroundColor":"rgba(54, 162, 235, 0.5)","borderColor":"rgb(54, 162, 235)","borderWidth":1,"yAxisID":"yBar"},{"label":"Target Output","data":[1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806],"type":"line","fill":false,"borderColor":"rgb(255, 99, 132)","tension":0.1,"yAxisID":"yLine"}]}
{"_msgid":"33014f88b54ba96b","payload":{"labels":["7AM-8AM","8AM-9AM","9AM-10AM","10AM-11AM","11AM-12PM","12PM-1PM","1PM-2PM","2PM-3PM","3PM-4PM","4PM-5PM","5PM-6PM","6PM-7PM"],"datasets":[{"label":"Hourly Output","data":[0,0,22692,59852,179892,0,179928,59948,64648,0,0,0],"type":"bar","backgroundColor":"rgba(54, 162, 235, 0.5)","borderColor":"rgb(54, 162, 235)","borderWidth":1,"yAxisID":"yBar"},{"label":"Target Output","data":[1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806,1276806],"type":"line","fill":false,"borderColor":"rgb(255, 99, 132)","tension":0.1,"yAxisID":"yLine"}]},"topic":"triggerAutoDailyTotal","reportDateForUTCDay":"2025-05-26T00:00:00.000Z","query":"\n    SELECT\n    [Time],\n    SUM(Total) AS Total \nFROM\n    dbo.batch\nWHERE\n    [Time] >= CONVERT(datetime, '2025-05-26 00:00:00.000', 120)\n    AND [Time] <= CONVERT(datetime, '2025-05-26 23:59:59.999', 120)\nGROUP BY\n    [Time]\nORDER BY\n    [Time] ASC;\n","queryMode":"query","queryParams":[],"sqlInfo":[],"options":{"responsive":true,"maintainAspectRatio":false,"interaction":{"mode":"index","intersect":false},"stacked":false,"plugins":{"title":{"display":true,"text":"Hourly Output vs. Target Output (7AM-7PM UTC)"},"legend":{"position":"top"}},"scales":{"x":{"display":true,"title":{"display":false,"text":"Time Slot"}},"yBar":{"type":"linear","display":true,"position":"left","title":{"display":true,"text":"Hourly Output"},"beginAtZero":true},"yLine":{"type":"linear","display":true,"position":"right","title":{"display":true,"text":"Target Output"},"grid":{"drawOnChartArea":false},"beginAtZero":true}}}}

I just realised dashboard 2.0 is based on Vue.js. solved my problem