Ahh, I see. The headless rendering was the piece I was missing. That makes complete sense now why chart.js works without issue. I was hoping this was something simple that I was doing incorrectly, but it sounds like the environment I have Node-RED deployed in will cause more issues that I anticipated. I will investigate whether there is a different way for me to load fonts.
The flow I was testing with is based on your annotation example, which doesn't specify a font. I have also tried to set the font family options to Helevetica Neue, Helvetica, Arial and sans-serif.
Unfortunately I'm too new for attachments, so I will have to paste the json below.
Thank you for your work on this module, it is appreciated!
[
{
"id": "257416e5d7b66760",
"type": "inject",
"z": "8c3415e03fc5e694",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 290,
"y": 120,
"wires": [
[
"777fec3be9a48f28"
]
]
},
{
"id": "777fec3be9a48f28",
"type": "function",
"z": "8c3415e03fc5e694",
"name": "example",
"func": "msg.payload = {\n type: 'bar',\n data: {\n labels: ['Jan', 'Feb', 'Mar'],\n datasets: [{\n label: 'Sales',\n data: [12, 19, 15]\n }]\n },\n options: {\n plugins: {\n annotation: {\n annotations: {\n myImportantLine: {\n type: 'line',\n yMin: 15,\n yMax: 15,\n borderColor: 'red',\n borderWidth: 2,\n scaleID: 'y'\n }\n }\n }\n }\n }\n};\nreturn msg;\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 480,
"y": 120,
"wires": [
[
"58a9581123964cd3"
]
]
},
{
"id": "58a9581123964cd3",
"type": "chart-image",
"z": "8c3415e03fc5e694",
"name": "",
"width": "",
"height": "",
"debug": false,
"x": 670,
"y": 120,
"wires": [
[
"8625cca462f380c2"
]
]
},
{
"id": "8625cca462f380c2",
"type": "function",
"z": "8c3415e03fc5e694",
"name": "function 8",
"func": "const buffer = msg.payload;\nmsg.payload = buffer.toString('base64');\n// global.set(\"ChartBuffer\", msg.payload);\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 860,
"y": 120,
"wires": [
[
"be712014751d5d66"
]
]
},
{
"id": "be712014751d5d66",
"type": "ui_template",
"z": "8c3415e03fc5e694",
"group": "7c014f53d28beb23",
"name": "",
"order": 0,
"width": "4",
"height": "4",
"format": "<img src=\"data:image/jpeg;base64,{{msg.payload}}\" style=\"max-width: 50%; height: auto;\">",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 1040,
"y": 120,
"wires": [
[]
]
},
{
"id": "7c014f53d28beb23",
"type": "ui_group",
"name": "chart-image",
"tab": "2fc1ffece0d082f3",
"order": 1,
"disp": true,
"width": 20,
"collapse": false,
"className": ""
},
{
"id": "2fc1ffece0d082f3",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
