node-red-contrib-chart-image/src/chartImageNode.html

Use chartjs to generate charts and output them as image buffers.

<script type="text/javascript">
    RED.nodes.registerType('chart-image',{
        category: 'function',
        color: '#81e3c9',
        defaults: {
            name: {value:''},
			width: {value: 500},
			height: {value: 300}
        },
        inputs:1,
        outputs:1,
        icon: 'font-awesome/fa-bar-chart-o',
        label: function() {
            return this.name || 'chart-image';
        },
        labelStyle: function() {
            return this.name?'node_label_italic':'';
        },
        oneditsave: function() {
            if (this.width === undefined) {
                $("#node-input-width").val(500);
            }
			if (this.height === undefined) {
                $("#node-input-height").val(300);
            }
        }
    });

</script>

<script type="text/html" data-template-name="chart-image">
    <div class="form-row">
        <label for="node-input-width" style="width:120px;"><i class="fa fa-arrows-h"></i> Chart Width</label>
        <input type="number" id="node-input-width" placeholder="500" style="width:70%;">
    </div>
    <div class="form-row">
        <label for="node-input-height" style="width:120px;"><i class="fa fa-arrows-v"></i> Chart Height</label>
        <input type="number" id="node-input-height" placeholder="300" style="width:70%;">
    </div>
    <div class="form-row">
        <label for="node-input-name" style="width:120px;"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/html" data-help-name="chart-image">
    <p>Generate a chart in image form using Chart.js</p>
	<h3>Details:</h3>
	<p>A chart image buffer will be generated using the chart.js definition object found in <code>msg.payload</code>. See the chart.js documentation for more info on defining a chart.</p>
	<p>Setting <code>msg.width</code> and/or <code>msg.height</code> to the desired size in pixels will override the node configuration. </p>
	<h3>Resources</h3>
	<a href="https://www.chartjs.org/docs/latest/">Chart.js documentation</a><br>
	<a href="https://www.npmjs.com/package/chartjs-node-canvas">charjs-code-canvas documentation</a><br>
	<a href="https://chartjs-plugin-datalabels.netlify.app/guide/">chartjs-plugin-datalabels documentation</a>
</script>