# How to draw xy charts?

**URL:** <https://discourse.nodered.org/t/how-to-draw-xy-charts/48174>\
**Category:** Dashboard\
**Created:** [8 July 2021 09:57 UTC](https://discourse.nodered.org/t/how-to-draw-xy-charts/48174 "2021-07-08T09:57:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [8 July 2021 09:57 UTC](https://discourse.nodered.org/t/how-to-draw-xy-charts/48174/1 "2021-07-08T09:57:41Z")

</div>

Hello all!

I want to draw a simple xy chart like shown in the example. How can I do this?  
I'm struggling for days now of getting rid of the time based x-axis.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9aeac159968c8084cbcd142d7aa13507b1f5c727.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [8 July 2021 10:35 UTC](https://discourse.nodered.org/t/how-to-draw-xy-charts/48174/2 "2021-07-08T10:35:09Z")

</div>

I have an old example,see if it helps.

```auto
[{"id":"c4f537f2.375308","type":"ui_template","z":"407e1abc.6d1cb4","group":"c7a27394.057878","name":"CSS","order":6,"width":0,"height":0,"format":"<style>\n canvas.chart.chart-line {\n height:calc(100%) !important;\n width: calc(100%) !important;\n background-image:linear-gradient(0.5turn, #f69d3c00,#f69d3c20, #f69d3c00);\n }\n \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":770,"y":2300,"wires":[[]]},{"id":"bb7019ee.9d8e08","type":"inject","z":"407e1abc.6d1cb4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":2380,"wires":[["82bd568f.ac0638","27d4e78.5dbe518"]]},{"id":"82bd568f.ac0638","type":"function","z":"407e1abc.6d1cb4","name":"modify chart options","func":"let gridcolors = 'rgba(255, 160, 0, 0.3)'\nmsg.ui_control = {\n options: {\n legend: {\n display: false\n },\n tooltips: {\n enabled: false\n },\n scales: {\n xAxes: [{\n type: 'linear',\n id: 'custom-x-axis',\n position:'bottom',\n padding:100,\n gridLines:{\n color:gridcolors,\n zeroLineColor:'rgba(123, 113, 113, 0.75)',\n tickMarkLength:7,\n drawTicks:false\n },\n ticks: {\n fontColor:\"#ccc\",\n max: 60,\n min: 0,\n stepSize: 10\n \n }\n }],\n yAxes: [{\n id: 'custom-y-axis',\n \n gridLines:{\n color:gridcolors,\n zeroLineColor:'red',\n tickMarkLength:5,\n drawTicks:false\n },\n ticks: {\n fontColor:\"#ccc\",\n max: 30,\n min: -30,\n stepSize: 10\n }\n }]\n }\n }\n}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":540,"y":2400,"wires":[["38072b72.56e0a4"]]},{"id":"27d4e78.5dbe518","type":"function","z":"407e1abc.6d1cb4","name":"data collection","func":"var data = [\n {x:1,y:5},\n {x:15,y:2},\n {x:30,y:7}\n]\n\n\n\nmsg.payload = [{\n \"series\": [\"A\"],\n \"xAxisID\": 'custom-x-axis',\n \"yAxisID\": 'custom-y-axis',\n \"data\": [data],\n \"labels\": [\"\"]\n}]\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":560,"y":2360,"wires":[["38072b72.56e0a4"]]},{"id":"38072b72.56e0a4","type":"ui_chart","z":"407e1abc.6d1cb4","name":"","group":"c7a27394.057878","order":5,"width":9,"height":"6","label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#00b3ff","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":770,"y":2380,"wires":[[]]},{"id":"c7a27394.057878","type":"ui_group","name":"CHART","tab":"54e197d8.7f7fe8","order":2,"disp":false,"width":"9","collapse":false},{"id":"54e197d8.7f7fe8","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [8 July 2021 11:03 UTC](https://discourse.nodered.org/t/how-to-draw-xy-charts/48174/3 "2021-07-08T11:03:22Z")

</div>

Thanks a lot! This works quite well!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cfb6ae83d3a69f4566817be120f8e2991ca2f95.png)

---

<div class="post-metadata">

**Author:** ![Mannshoch](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mannshoch/32/19477_2.png) [@Mannshoch](https://discourse.nodered.org/u/Mannshoch)\
**Post date:** [17 July 2021 09:23 UTC](https://discourse.nodered.org/t/how-to-draw-xy-charts/48174/4 "2021-07-17T09:23:59Z")

</div>

@hotNipi  
Thanks for this example. I'm playing around with the code for showing the position of my Roomba on the map, and it's working now.  
A Question about a secondary color appeared. May you have an Idea for that.  
I played with the examples on [node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md#example)  
But at moment it seems I'm not able to add a second colored line

```auto
msg.payload = [{
    "series": ["A","B"],
    "xAxisID": 'custom-x-axis',
    "yAxisID": 'custom-y-axis',
    "data": [[data],[data2]],
    "labels": ["X","Y"]
}];

```

Do you have an Idea?

---

<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 2021 09:24 UTC](https://discourse.nodered.org/t/how-to-draw-xy-charts/48174/5 "2021-07-31T09:24:06Z")

</div>

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