# Node Red Dashboard Chart - Custom X Axis Labels

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929>\
**Category:** Dashboard\
**Created:** [17 January 2019 18:02 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929 "2019-01-17T18:02:34Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [17 January 2019 18:02 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/1 "2019-01-17T18:02:34Z")

</div>

I am trying to customize the x axis labels on the chart widget.  
Can I get an example of how I would populate the X-Axis Input Text Box on the Chart widget in order to set each label along the x axis?  
 ![X%20Axis%20Label](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d37668b88accd019401ad9490a6480b43c6294e3.png)

Thanks...

---

<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:** [17 January 2019 18:54 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/2 "2019-01-17T18:54:42Z")

</div>

As per the info box on the right - The axis labels can be formatted using a [Moment.js time formatted](https://momentjs.com/docs/#/displaying/format/) string.

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [17 January 2019 21:08 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/3 "2019-01-17T21:08:31Z")

</div>

Well, I probably forgot to mention that I do not want any time labels on the x-axis.  
In my case integer values like 0,10,20,30,40..... for the x-axis labels. How would I set the custom labels for such?

Thanks...

---

<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:** [17 January 2019 21:35 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/4 "2019-01-17T21:35:18Z")

</div>

Many threads about this kind of topic you can find here. Latest: [https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373](https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373)

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [18 January 2019 18:22 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/5 "2019-01-18T18:22:42Z")

</div>

Well, I tried several ways of entering the x-axis labels, but I could not get them to work the way I need.  
So, here is an image of what I want to accomplish. Can this be done, if so, how do I enter the correct format in the chart widget?  
 ![Node%20Red%20Custom%20X-Axis%20Labels](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/29850b78c9ec3064b7b5ce52eccd139089ce9665.jpeg)

Thanks...

---

<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 January 2019 18:47 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/6 "2019-01-18T18:47:07Z")

</div>

Any chance of sharing a copy of the input data ?

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [18 January 2019 19:08 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/7 "2019-01-18T19:08:33Z")

</div>

Sure, here is the input to the chart widget.

```auto
var data = [{"x":0,"y":msg.payload[0]},{"x":1,"y":msg.payload[1]},{"x":2,"y":msg.payload[2]},{"x":3,"y":msg.payload[3]},{"x":4,"y":msg.payload[4]},{"x":5,"y":msg.payload[5]},{"x":6,"y":msg.payload[6]},{"x":7,"y":msg.payload[7]},{"x":8,"y":msg.payload[8]},{"x":9,"y":msg.payload[9]},
            {"x":10,"y":msg.payload[10]},{"x":11,"y":msg.payload[11]},{"x":12,"y":msg.payload[12]},{"x":13,"y":msg.payload[13]},{"x":14,"y":msg.payload[14]},{"x":15,"y":msg.payload[15]},{"x":16,"y":msg.payload[16]},{"x":17,"y":msg.payload[17]},{"x":18,"y":msg.payload[18]},{"x":19,"y":msg.payload[19]},
            {"x":20,"y":msg.payload[20]},{"x":21,"y":msg.payload[21]},{"x":22,"y":msg.payload[22]},{"x":23,"y":msg.payload[23]},{"x":24,"y":msg.payload[24]},{"x":25,"y":msg.payload[25]},{"x":26,"y":msg.payload[26]},{"x":27,"y":msg.payload[27]},{"x":28,"y":msg.payload[28]},{"x":29,"y":msg.payload[29]},
            {"x":30,"y":msg.payload[30]},{"x":31,"y":msg.payload[31]},{"x":32,"y":msg.payload[32]},{"x":33,"y":msg.payload[33]},{"x":34,"y":msg.payload[34]},{"x":35,"y":msg.payload[35]},{"x":36,"y":msg.payload[36]},{"x":37,"y":msg.payload[37]},{"x":38,"y":msg.payload[38]},{"x":39,"y":msg.payload[39]},
            {"x":40,"y":msg.payload[40]},{"x":41,"y":msg.payload[41]},{"x":42,"y":msg.payload[42]},{"x":43,"y":msg.payload[43]},{"x":44,"y":msg.payload[44]},{"x":45,"y":msg.payload[45]},{"x":46,"y":msg.payload[46]},{"x":47,"y":msg.payload[47]},{"x":48,"y":msg.payload[48]},{"x":49,"y":msg.payload[49]},
            {"x":50,"y":msg.payload[50]},{"x":51,"y":msg.payload[51]},{"x":52,"y":msg.payload[52]},{"x":53,"y":msg.payload[53]},{"x":54,"y":msg.payload[54]},{"x":55,"y":msg.payload[55]},{"x":56,"y":msg.payload[56]},{"x":57,"y":msg.payload[57]},{"x":58,"y":msg.payload[58]},{"x":59,"y":msg.payload[59]},
            {"x":60,"y":msg.payload[60]},{"x":61,"y":msg.payload[61]},{"x":62,"y":msg.payload[62]},{"x":63,"y":msg.payload[63]}];

msg.payload = [{
  "series": ["A"],
  "data": [data],
  "labels": []
}];
msg.topic = "Data set 1"; 
return msg;

```

Thanks...

---

<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 January 2019 22:08 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/8 "2019-01-18T22:08:16Z")

</div>

Try custom format `SSS`  
(though there is a bug I have fixed in master (not yet on npm) that may prevent it working)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3f5f6a9ed1a1dade42a5974e9a92859c2602fdda.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bd1ca2e293f15e075ae00fb5357b7a02d71f3c8e.png)

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [21 January 2019 17:12 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/9 "2019-01-21T17:12:49Z")

</div>

Tried inputting **SSS** , as you suggest, but has no effect...

-Thanks

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [21 January 2019 17:20 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/10 "2019-01-21T17:20:57Z")

</div>

Oh, wait, it does show up, however, not scaled - just as data points from 0-63. My scale is 0-100, but with 64 data points. How do I adjust scaling?

Thanks...

---

<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:** [21 January 2019 22:17 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/11 "2019-01-21T22:17:09Z")

</div>

not sure what you mean ?  
screenshot ?

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [22 January 2019 17:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/12 "2019-01-22T17:01:22Z")

</div>

This should make sense, basically there are 64 data points on the x-axis, but the scale should go from 0-100 instead of 0-63.

![Chart%20Required%20X-Axis%20Scale](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/dc160acc14e32c9159c054e36377b6d02c275315.jpeg)

---

<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:** [22 January 2019 17:07 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/13 "2019-01-22T17:07:04Z")

</div>

Errr - the data you supplied only has x going from 0 to 63... you need to scale that to 100 if you want x to be 100

```auto
var data = [{"x":0,"y":msg.payload[0]}, ... ,{"x":63,"y":msg.payload[63]}];
```

---

<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:** [22 January 2019 17:14 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/14 "2019-01-22T17:14:43Z")

</div>

Just to clarify that, in case you don't get it, the last element should be something like

```auto
{"x":100,"y":msg.payload[63]}

```

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [22 January 2019 18:45 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/15 "2019-01-22T18:45:20Z")

</div>

How about this, instead of X in integers from 0-64, X as decimal 1.5625 from 0-64?  
var data = [{"x":0,"y":msg.payload[0]} ,{"x"1.5625,"y":msg.payload[1]}, {"x"3.125,"y":msg.payload[2]},...{"x":100,"y":msg.payload[63]}];

What do you think?

---

<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:** [22 January 2019 20:58 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/16 "2019-01-22T20:58:40Z")

</div>

> [@tcontrada](#):
>
> What do you think?

Isn't it more a matter of whether it does what you want rather than what we think about it?

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [23 January 2019 19:38 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/17 "2019-01-23T19:38:47Z")

</div>

So here it is working with the 0-100 scale that I needed...  
 ![chart%20x-axis%200-100%20scale](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6c7f35aac625c9bbcb05e6236f38bbbdfd44657b.png)

...and here is the scale adjustment to the data 64 array.

 ![chart%20x-axis%200-100%20scale%20code](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/445a332fe09ea8e9c6e5bef1e31473e75e6cd816.png)

Thanks...

---

<div class="post-metadata">

**Author:** ![junxian](https://avatars.discourse-cdn.com/v4/letter/j/e19adc/32.png) [@junxian](https://discourse.nodered.org/u/junxian)\
**Post date:** [31 January 2020 10:17 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/18 "2020-01-31T10:17:15Z")

</div>

Try change X-axis Label to x.

 ![Picture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/027666e008a58eaec770b83c817ce0c4830f951b.png)

---

<div class="post-metadata">

**Author:** ![henriquefchaves](https://avatars.discourse-cdn.com/v4/letter/h/278dde/32.png) [@henriquefchaves](https://discourse.nodered.org/u/henriquefchaves)\
**Post date:** [10 April 2021 15:31 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-custom-x-axis-labels/6929/19 "2021-04-10T15:31:46Z")

</div>

That is awesome!! if i want to put strings on x axis someone know how can i do it? And a title on x-axis ? @tcontrada@dceejay