# Chart line color

**URL:** <https://discourse.nodered.org/t/chart-line-color/13427>\
**Category:** Dashboard\
**Created:** [18 July 2019 07:48 UTC](https://discourse.nodered.org/t/chart-line-color/13427 "2019-07-18T07:48:40Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![salahuiste](https://avatars.discourse-cdn.com/v4/letter/s/97f17d/32.png) [@salahuiste](https://discourse.nodered.org/u/salahuiste)\
**Post date:** [18 July 2019 07:48 UTC](https://discourse.nodered.org/t/chart-line-color/13427/1 "2019-07-18T07:48:40Z")

</div>

hello everybody  
can i give for each topic a color programmatically ? for example i'm gonna create a table and add for every topic its color , then when i receive a data i will give the color that matchs with its topic , please help me to do it ...  
i wanna just to know how to give the colors by code , not from the node  
and thanks in advance

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 July 2019 07:54 UTC](https://discourse.nodered.org/t/chart-line-color/13427/2 "2019-07-18T07:54:58Z")

</div>

No super simple way to do that. But what you can do is preset them in the order you want. The colours are set in the config. The first topic to arrive gets first colour, etc. So create an inject that sends a null message on each topic in order you want at deploy time. Then when real data arrives it will pick up the colour you want.

---

<div class="post-metadata">

**Author:** ![salahuiste](https://avatars.discourse-cdn.com/v4/letter/s/97f17d/32.png) [@salahuiste](https://discourse.nodered.org/u/salahuiste)\
**Post date:** [18 July 2019 08:14 UTC](https://discourse.nodered.org/t/chart-line-color/13427/3 "2019-07-18T08:14:03Z")

</div>

thank you for your quick response  
the problem is that i have to monitor my system , so if everything is ok the line color will be green(always green), im receiving data from sensors and it may be defected ,and if its the first data it will get green as color...but me i wanna set green color when everything is ok ...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 July 2019 08:29 UTC](https://discourse.nodered.org/t/chart-line-color/13427/4 "2019-07-18T08:29:28Z")

</div>

I can’t think of a way to set the colour dynamically.

---

<div class="post-metadata">

**Author:** ![salahuiste](https://avatars.discourse-cdn.com/v4/letter/s/97f17d/32.png) [@salahuiste](https://discourse.nodered.org/u/salahuiste)\
**Post date:** [18 July 2019 08:33 UTC](https://discourse.nodered.org/t/chart-line-color/13427/5 "2019-07-18T08:33:38Z")

</div>

ok , Thanks for your time !  
Have a nice day .

---

<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:** [18 July 2019 12:47 UTC](https://discourse.nodered.org/t/chart-line-color/13427/6 "2019-07-18T12:47:44Z")

</div>

Possibly you could use two different lines of different colours and feed the value to one or the other dependent on the value. Is it possible to stop a line by sending it null or something so there would be a gap in the first one while the other took over.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 July 2019 14:30 UTC](https://discourse.nodered.org/t/chart-line-color/13427/7 "2019-07-18T14:30:20Z")

</div>

interesting thought - they wouldn't join up directly of course unless you sent the value to both topics so they appear to be on top of each other at that instant - but yes sending null will cause points not to be plotted so this could work... would be an interesting test / example for flows site.

---

<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:** [18 July 2019 20:32 UTC](https://discourse.nodered.org/t/chart-line-color/13427/9 "2019-07-18T20:32:48Z")

</div>

This might be usable

```auto
[{"id":"9e863e1e.6e8ce8","type":"function","z":"514a90a5.c7bae8","name":"Sin","func":"msg.payload = Math.sin(msg.payload/4000)\nreturn msg;","outputs":1,"noerr":0,"x":306.5,"y":159,"wires":[["4151227a.e0dd7c"]]},{"id":"b1d4bffb.22aab8","type":"inject","z":"514a90a5.c7bae8","name":"0.5 sec timestamp","topic":"","payload":"","payloadType":"date","repeat":"0.5","crontab":"","once":false,"onceDelay":0.1,"x":128.5,"y":159,"wires":[["9e863e1e.6e8ce8"]]},{"id":"a76560d8.af7618","type":"ui_chart","z":"514a90a5.c7bae8","name":"","group":"39b33e51.922692","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":603.5,"y":159,"wires":[[],[]]},{"id":"4151227a.e0dd7c","type":"function","z":"514a90a5.c7bae8","name":"Set Topics","func":"let threshold = 0.5\nlet lowTopic = \"low\"\nlet highTopic = \"high\"\nlet thisTopic;\nlet totherTopic\nif (msg.payload > threshold) {\n thisTopic = highTopic\n totherTopic = lowTopic\n} else {\n thisTopic = lowTopic\n totherTopic = highTopic\n}\nlet lastTopic = context.get('last') || thisTopic\nlet msg2 = null\nif (thisTopic != lastTopic) {\n // just crossed the threshold, send to both lines\n msg.topic = lastTopic\n msg2 = {payload: msg.payload, topic: thisTopic}\n} else {\n msg.topic = thisTopic\n msg2 = {payload: null, topic: totherTopic} // leave payload null to stop the line\n}\ncontext.set('last', thisTopic)\nreturn [[msg, msg2]];","outputs":1,"noerr":0,"x":453,"y":159,"wires":[["a76560d8.af7618"]]},{"id":"39b33e51.922692","type":"ui_group","z":"","name":"Default","tab":"55546119.d20b2","disp":true,"width":"6","collapse":false},{"id":"55546119.d20b2","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

I have added this to the flow library at [https://flows.nodered.org/flow/a78ac10821112eb07fb8be8957a9f7cb](https://flows.nodered.org/flow/a78ac10821112eb07fb8be8957a9f7cb)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 July 2019 14:13 UTC](https://discourse.nodered.org/t/chart-line-color/13427/10 "2019-07-19T14:13:18Z")

</div>

That is a thing of beauty... ! Nice work.

---

<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:** [19 July 2019 15:05 UTC](https://discourse.nodered.org/t/chart-line-color/13427/11 "2019-07-19T15:05:16Z")

</div>

Hmm, not sure I would go quite that far.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 July 2019 19:28 UTC](https://discourse.nodered.org/t/chart-line-color/13427/12 "2019-07-19T19:28:13Z")

</div>

Ok. Was just as I imagined, and what I wanted added to flows.

---

<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:** [19 July 2019 20:59 UTC](https://discourse.nodered.org/t/chart-line-color/13427/13 "2019-07-19T20:59:14Z")

</div>

On second thoughts I liked your first response better 🙂

---

<div class="post-metadata">

**Author:** ![sdrshnptl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sdrshnptl/32/40446_2.png) [@sdrshnptl](https://discourse.nodered.org/u/sdrshnptl)\
**Post date:** [28 December 2022 05:05 UTC](https://discourse.nodered.org/t/chart-line-color/13427/14 "2022-12-28T05:05:48Z")

</div>

Hello All,  
I've graph with data dump in following way in function block..

```auto
    var data = [
        { topic: "value", payload: msg.payload},
        { topic: "Top", payload: 11.3 },
        { topic: "Control", payload: 10.5},
    ]
    data.ui_control = { "colors": ['#FF0000', '#00FF00', '#0000FF', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'] };
    return [data]

```

My issue is, unable to override color setting from ui\_control.

I wish that I could set color for each topic like `{topic:"line1",paload:msg.payload,color:"red"}`

Any help appreciated!!