node-red-contrib-chart-image 1.2.0
Use chartjs to generate charts and output them as image buffers.
node-red-contrib-chart-image
Generate a chart in image form using Chart.js
Details:
A chart image buffer will be generated using the chart.js definition object found in msg.payload
. See the chart.js documentation for more info on defining a chart.
Canvas Size:
Setting msg.width
and/or msg.height
to the desired size in pixels will override the node configuration.
Default Color Pallet:
If no backgroundColor
or borderColor
is defined for a dataset, Chartjs assigns the global default color of rgba(0,0,0,0.1)
. To make life a little easier, this node changes that behavior to assign each dataset a color from preset pallet, which includes 32 colors. If you define your own colors in a dataset, that color will be used, you do have to define both backgroundColor
and borderColor
if both are to be displayed. for line charts, use fill:false
to prevent the use of backgroundColor
.
Plugins:
This node includes chartjs-plugin-datalabels
and chartjs-plugin-annotations
. Each can be defined as you would according to their documentation. You can also define the chart background color by defining a chartArea
object under the options scope.
chartArea: {
backgroundColor: 'white'
}
- NOTE: chartjs-plugin-datalabels registers itself automatically when imported. This node looks for a
display:true
object in the datalabels definition to register or unregistert the plugin. This prevents datalabels showing up aninvited.
eg:
msg.payload = {
options: {
plugins: {
datalabels: {
display:true
}
}
}
}
Additional plugins can be used by installing the desired plugin in the Node-RED install directory and following the settings.js example to import the module into your Node-RED instance.
functionGlobalContext: {
// os:require('os'),
// jfive:require("johnny-five"),
// j5board:require("johnny-five").Board({repl:false}),
myMuchNeededPlugin: require('chartjs-plugin-yourplugin')
},
From there, you can pass it to your chart vie msg.plugins
.
msg.plugins = {
myMuchNeededPlugin: global.get('myMuchNeededPlugin')
};
Then you just need to define the plugin options in your chart definition object.
Resources
- Chart.js documentation
- charjs-code-canvas documentation
- chartjs-plugin-datalabels documentation
- chartjs-plugin-annotations
Please report bugs, suggest improvements!
https://github.com/gemini86/node-red-contrib-chart-image/issues