# Statetrail chart in uibuilder

**URL:** <https://discourse.nodered.org/t/statetrail-chart-in-uibuilder/93838>\
**Category:** General\
**Tags:** uibuilder, statetrail\
**Created:** [11 December 2024 01:06 UTC](https://discourse.nodered.org/t/statetrail-chart-in-uibuilder/93838 "2024-12-11T01:06:34Z")\
**Posts on this page:** 1\
**Showing post:** 16

<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:** [13 December 2024 18:15 UTC](https://discourse.nodered.org/t/statetrail-chart-in-uibuilder/93838/16 "2024-12-13T18:15:55Z")

</div>

Slow progress on my alternative, but progress none-the-less:

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

The block colours are specified in a mapping table:

```auto
const categoryMap = [
    { range: [0, 0.3], title: "Off", color: "#ff0000" },
    { range: [0.3, 0.6], title: "Partial", color: "#ffff00" },
    { range: [0.6, 1], title: "On", color: "#00ff00" }
];

```

So you can use any numeric value in the input data and it automatically maps to an output name and colour.

---

_[View the full topic](https://discourse.nodered.org/t/statetrail-chart-in-uibuilder/93838)._