# \[Announce\] node-red-contrib-chart-image

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828>\
**Category:** Share Your Nodes\
**Created:** [28 July 2020 14:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828 "2020-07-28T14:38:10Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![gemini86](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gemini86/32/70967_2.png) [@gemini86](https://discourse.nodered.org/u/gemini86)\
**Post date:** [28 July 2020 14:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/1 "2020-07-28T14:38:10Z")

</div>

I had a project that required generating charts from my db automatically a emailing them to coworkers using outlook. This required static images, so I wrote this node to make that simple. It's just a Node-RED wrapper for chartjs-node-canvas, which uses node-canvas to create the charts on. I'm using chartjs-node-canvas built in image buffer output, which can be saved to a .png file or stored in a global variable to be accessed over an http endpoint.

I've included chartjs-plugin-datalabels and chartjs-plugin-annotations as those are pretty commonly used.

Any feedback is appreciated.

> **[node-red-contrib-chart-image](https://flows.nodered.org/node/node-red-contrib-chart-image)**
>
> Use chartjs to generate charts and output them as image buffers.

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [30 July 2020 16:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/2 "2020-07-30T16:34:40Z")

</div>

Thanks for the work. I would love to have the chartjs node to show live line chart. The line chart from Node Red Dashboard has very limited function (slow response for real-time data, can't zoom in/out).

---

<div class="post-metadata">

**Author:** ![gemini86](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gemini86/32/70967_2.png) [@gemini86](https://discourse.nodered.org/u/gemini86)\
**Post date:** [30 July 2020 17:02 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/3 "2020-07-30T17:02:37Z")

</div>

@davidz, the node as designed will only produce a static image. This is for attaching to emails where JavaScript is not possible.

Have you looked at node-red-contrib-chartjs?

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [31 July 2020 04:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/4 "2020-07-31T04:52:25Z")

</div>

Thanks Gemini86. I looked at the chartjs node but don't know how to integrate it with the node red dashboard. It would be ideal to replace the line chart from the dashboard with the chartjs one, since i have spent lots of efforts on the I/O interface using dashboard ☹

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [31 July 2020 05:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/5 "2020-07-31T05:42:11Z")

</div>

Take a look at plotly.js instead. There is a [nice example](https://discourse.nodered.org/t/plotly-example-charts/30697) here on the forum. Doesnt require any installation and can be implemented directly with ui-template nodes.

Look at example 3 and modify it's parameters in the bottom of the ui-template node to:

```auto
Plotly.newPlot('example3', data, layout, { modeBarButtonsToRemove: ['toggleSpikelines'], displaylogo: false})

```

Deploy and refresh the dashboard, you will see all kinds of buttons appear, including download as image and it supports zooming among [many other features](https://plotly.com/javascript/).

---

<div class="post-metadata">

**Author:** ![gemini86](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gemini86/32/70967_2.png) [@gemini86](https://discourse.nodered.org/u/gemini86)\
**Post date:** [31 July 2020 16:41 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/6 "2020-07-31T16:41:02Z")

</div>

You can still use the template node for chartjs. Simply follow their direction like you would for use in a web page.

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [31 July 2020 23:10 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/7 "2020-07-31T23:10:04Z")

</div>

Thanks. The plotly looks nice. I will check it out.

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [31 July 2020 23:10 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/8 "2020-07-31T23:10:49Z")

</div>

Thanks. It looks like I have to use the template node for better GUI. I will give it a try.

---

<div class="post-metadata">

**Author:** ![phazz1980](https://avatars.discourse-cdn.com/v4/letter/p/50afbb/32.png) [@phazz1980](https://discourse.nodered.org/u/phazz1980)\
**Post date:** [2 August 2020 13:06 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/9 "2020-08-02T13:06:04Z")

</div>

Is it possible to change the pixel density?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 August 2020 13:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/10 "2020-08-02T13:34:29Z")

</div>

Welcome to the forum, what exactly do you mean?

---

<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:** [26 September 2020 14:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-chart-image/30828/11 "2020-09-26T14:38:10Z")

</div>

This topic was automatically closed after 60 days. New replies are no longer allowed.