# How to attach a chart-image into body of mail, not as an attachment

**URL:** https://discourse.nodered.org/t/how-to-attach-a-chart-image-into-body-of-mail-not-as-an-attachment/96846
**Category:** General
**Tags:** chart-image, e-mail
**Created:** [2 May 2025 04:20 UTC](https://discourse.nodered.org/t/how-to-attach-a-chart-image-into-body-of-mail-not-as-an-attachment/96846 "2025-05-02T04:20:28Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [2 May 2025 04:20 UTC](https://discourse.nodered.org/t/how-to-attach-a-chart-image-into-body-of-mail-not-as-an-attachment/96846/1 "2025-05-02T04:20:28Z")

</div>

I have a working example of generating a chart, creating a chart image and sending to email as attachment.  
what i need is to embed the chart image in the body of the mail.  
how do i do that ?  
or  
how do i convert the chart image into html content ?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/764970ebdbc765934eb2bca7a1d43b523c6ed610.png)

```auto
[{"id":"e284de4.fc6a12","type":"function","z":"7ca35fb6225bb9ac","name":"Line Chart","func":"function getGetOrdinal(n) {\n var s=[\"th\",\"st\",\"nd\",\"rd\"],\n v=n%100;\n return n+(s[(v-20)%10]||s[v]||s[0]);\n }\n\nvar dL = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\nvar dS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nvar mL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\nvar mS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];\n\nlet now = new Date();\n\n// Create the chart object\nlet m = {\n type: 'line',\n options: {\n title: {\n display:true,\n text:'Line chart example'\n },\n legend: {\n display:false\n },\n chartArea: {\n backgroundColor: 'white'\n },\n plugins: {\n datalabels: {\n display:true,\n backgroundColor:'whitesmoke',\n borderRadius:1,\n padding:1,\n align: 'right',\n anchor: function(context) {\n //node.send({debug:{dataindex:context.dataIndex}});\n if (context.dataIndex == context.dataset.data.length - 1) {\n return 'center';\n } else {\n return 'end';\n }\n },\n offset:8,\n formatter:function(value) {\n return value > 0 ? value.toLocaleString() : '';\n }\n }\n }\n },\n data: {\n labels:[],\n datasets: [\n {\n label:\"Sample data\",\n borderColor:'rgba(57,97,184,0.8)',\n fill:false,\n data:[]\n }\n ]\n }\n}\n\nlet l = Math.floor(Math.random()*50);\n\nfor (let i=0; i<10; i++) {\n l = l + Math.floor(Math.random()*6)-3;\n m.data.datasets[0].data.push(l);\n var d = new Date();\n d.setTime(now.getTime()-1000*60*60*24*(10-i));\n m.data.labels.push(dL[d.getDay()]+\", \"+getGetOrdinal(d.getDate()));\n}\n\nmsg.payload = m;\n\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":330,"y":1580,"wires":[["f7e11042.f96d9"]]},{"id":"f7e11042.f96d9","type":"chart-image","z":"7ca35fb6225bb9ac","name":"","width":500,"height":"500","x":550,"y":1580,"wires":[["62271758.c63728","fac75646.ed0358"]]},{"id":"f9531538.ab1988","type":"inject","z":"7ca35fb6225bb9ac","name":"Line Chart","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":1580,"wires":[["e284de4.fc6a12"]]},{"id":"fac75646.ed0358","type":"change","z":"7ca35fb6225bb9ac","name":"Set up the email","rules":[{"t":"set","p":"attachments","pt":"msg","to":"{}","tot":"msg"},{"t":"set","p":"attachments.content","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"attachments.filename","pt":"msg","to":"chart.jpg","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"Chart example","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"This is the auto generated chart","tot":"str"},{"t":"set","p":"to","pt":"msg","to":"someone@somewhere.com","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":860,"y":1580,"wires":[["fdcdbc42e7c7b83d"]]}]

```

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [2 May 2025 08:15 UTC](https://discourse.nodered.org/t/how-to-attach-a-chart-image-into-body-of-mail-not-as-an-attachment/96846/2 "2025-05-02T08:15:00Z")

</div>

To do that, you need an HTML email body and to convert the image to a data URL which you include in the body.

This, for example is in my own work email signature:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/5027b25e894f697ee87a9faabdcffa99f6c90051.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/5769f861cd858f7d38356f0cea61866d04714df8.png)

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [2 May 2025 09:28 UTC](https://discourse.nodered.org/t/how-to-attach-a-chart-image-into-body-of-mail-not-as-an-attachment/96846/3 "2025-05-02T09:28:25Z")

</div>

> [@TotallyInformation](#):
>
> convert the image to a data URL

how do i convert the image generated by chart-image node into data url ? i used a base64 node to generate some data buffer, but it is not doing what i intend to do.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [2 May 2025 09:47 UTC](https://discourse.nodered.org/t/how-to-attach-a-chart-image-into-body-of-mail-not-as-an-attachment/96846/4 "2025-05-02T09:47:33Z")

</div>

Easiest way will be to grab a supporting node.js library from npm and use a function node.

This seems to be an example of doing it manually though - you would need to interpret this to work in Node-RED. [Convert PNG image to data URI using Node.js · GitHub](https://gist.github.com/blenderous/1114735fa2c86eeed785)

Another example: [Converting an Image to a Data URI String in Node.js | by Niall Maher | Codú](https://www.codu.co/articles/converting-an-image-to-a-data-uri-string-in-node-js-dznt83ha)

One of several possible support libraries: [image-data-uri - npm](https://www.npmjs.com/package/image-data-uri)

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [2 May 2025 09:59 UTC](https://discourse.nodered.org/t/how-to-attach-a-chart-image-into-body-of-mail-not-as-an-attachment/96846/5 "2025-05-02T09:59:46Z")

</div>

> [@smanjunath211](#):
>
> how do i convert the image generated by chart-image node into data url

node-red-contrib-image-tools

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/9880017dde12f2642b40d3ed181707c506d144be.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/70c1bce625af67dbc0b9a7db88b6593534ef1a64.png)

---

<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: [31 July 2025 09:59 UTC](https://discourse.nodered.org/t/how-to-attach-a-chart-image-into-body-of-mail-not-as-an-attachment/96846/6 "2025-07-31T09:59:58Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
