# Clipping of Charts

**URL:** <https://discourse.nodered.org/t/clipping-of-charts/50639>\
**Category:** Dashboard\
**Created:** [5 September 2021 15:45 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639 "2021-09-05T15:45:22Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sheminasalam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sheminasalam/32/8981_2.png) [@sheminasalam](https://discourse.nodered.org/u/sheminasalam)\
**Post date:** [5 September 2021 15:45 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/1 "2021-09-05T15:45:22Z")

</div>

I am having trouble maintaining some distances from the axes while plotting line graph. I have seen that there is an option called clip in charts.js documentation which will keep the plotting off graph raised to a particular point above the axes. The problem is that I have no able to deploy it correctly. This is my msg.ui\_control paylod.

```auto
{
    "options": {
        "clip": {
            "left": 10,
            "top": 15,
            "right": 10,
            "bottom": -15
        },
        "elements": {
            "line": {
                "borderWidth": 5,
                "fill": false
            },
            "point": {
                "radius": 8
            }
        }
    }
}

```

I do believe that the placement of the clip details could be the problem here and so my graph looks like this.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0cc05e5777fd3138c7abb7eca915b30ac96321e3.png)  
I want it to look like the below  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d4fc5a1390781eba9e5c383efc7af4bda500c70.png)  
You can see that the graph is not touching any axes.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [5 September 2021 18:55 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/2 "2021-09-05T18:55:50Z")

</div>

What is the data that is creating the flow?

---

<div class="post-metadata">

**Author:** ![sheminasalam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sheminasalam/32/8981_2.png) [@sheminasalam](https://discourse.nodered.org/u/sheminasalam)\
**Post date:** [6 September 2021 00:43 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/3 "2021-09-06T00:43:48Z")

</div>

The data looks like below.

```auto

    {
        "series": [
            "Total Returns"
        ],
        "data": [
            [
                21,
                29,
                25,
                25,
                20,
                27
            ]
        ],
        "labels": [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun"
        ]
    }
]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 September 2021 09:49 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/4 "2021-09-06T09:49:19Z")

</div>

This data does not seem to be reflected in the chart images you posted

> [@sheminasalam](#):
>
> This is my msg.ui\_control paylod.

do you mean that that is the msg.payload being sent to a ui-control node?

It might be clearer if you were to provide your flow

---

<div class="post-metadata">

**Author:** ![sheminasalam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sheminasalam/32/8981_2.png) [@sheminasalam](https://discourse.nodered.org/u/sheminasalam)\
**Post date:** [6 September 2021 10:07 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/5 "2021-09-06T10:07:34Z")

</div>

This should give you the idea of flow of payload.

```auto
[{"id":"672b26ecea3c997d","type":"change","z":"ea287ec.ff1148","name":"size","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"options\":{\"clip\":{\"left\":20,\"top\":50,\"right\":20,\"bottom\":-50},\"elements\":{\"line\":{\"borderWidth\":5,\"fill\":false},\"point\":{\"radius\":8}}}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":430,"y":3620,"wires":[["e57199372e1aeee4"]]},{"id":"e57199372e1aeee4","type":"ui_chart","z":"ea287ec.ff1148","name":"Chart","group":"d08eb194.4f60d","order":7,"width":16,"height":9,"label":"Mutual Fund Return % History","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"30","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#d1001f","#f10404","#d66400","#025f02","#130557","#9e0557","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":570,"y":3620,"wires":[[]]},{"id":"4468935ca99051a3","type":"inject","z":"ea287ec.ff1148","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":[\"Total Returns\"],\"data\":[[21,29,25,25,20,27]],\"labels\":[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\"]}]","payloadType":"json","x":260,"y":3620,"wires":[["672b26ecea3c997d"]]},{"id":"d08eb194.4f60d","type":"ui_group","name":"Mutual Fund Investment History","tab":"a9a5b115d50d9ca1","order":1,"disp":false,"width":"16","collapse":false},{"id":"a9a5b115d50d9ca1","type":"ui_tab","name":"Mutual Fund Investment History","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 September 2021 11:28 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/6 "2021-09-06T11:28:06Z")

</div>

Not all chart.js options will apply to the ui-chart node. The ui-chart node dynamically builds the x and y axis'. for example if you have a value of 19, the y-axis will begin at 0, but if your lowest entry is 20, the y-axis will start at 20. If you go into your sample flow and change a valaue to 19, you will see the change.

For your x-axis starting with a `' ',` will push `Jan` over on the x-axis giving you space.

 ![Screen Shot 2021-09-06 at 7.21.30 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/32e7e0263e8bb49e8e2ff3832bc9b159045392e8.png)

You can create graphs using chart.js with a `ui-template` node (here is an example creating a bubble chart using chart.js: [EXAMPLE: How to create a Bubble chart (can be used as basis for scatter plot too) (flow) - Node-RED](https://flows.nodered.org/flow/d1b9f2c606e536ce4a3960abcd887754)) or use the node-red-contrib-chartjs node (I have no experience with it)

Here is your flow with the added " " and a data of `0` added.

```auto
[{"id":"cf654b95d23fcd66","type":"change","z":"a3faa9967eaf2dcb","name":"size","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"options\":{\"clip\":{\"left\":20,\"top\":50,\"right\":20,\"bottom\":-50},\"elements\":{\"line\":{\"borderWidth\":5,\"fill\":false},\"point\":{\"radius\":8}}}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":320,"wires":[["48206c8bed5e60d8"]]},{"id":"48206c8bed5e60d8","type":"ui_chart","z":"a3faa9967eaf2dcb","name":"Chart","group":"d08eb194.4f60d","order":7,"width":16,"height":9,"label":"Mutual Fund Return % History","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"15","ymax":"35","removeOlder":1,"removeOlderPoints":"30","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#d1001f","#f10404","#d66400","#025f02","#130557","#9e0557","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":610,"y":320,"wires":[[]]},{"id":"d2004b5a7401348b","type":"inject","z":"a3faa9967eaf2dcb","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":[\"Total Returns\"],\"data\":[[0,21,29,25,25,20,27]],\"labels\":[\" \",\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\"]}]","payloadType":"json","x":300,"y":320,"wires":[["cf654b95d23fcd66"]]},{"id":"d08eb194.4f60d","type":"ui_group","name":"Mutual Fund Investment History","tab":"a9a5b115d50d9ca1","order":1,"disp":false,"width":"16","collapse":false},{"id":"a9a5b115d50d9ca1","type":"ui_tab","name":"Mutual Fund Investment History","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![sheminasalam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sheminasalam/32/8981_2.png) [@sheminasalam](https://discourse.nodered.org/u/sheminasalam)\
**Post date:** [6 September 2021 13:26 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/7 "2021-09-06T13:26:10Z")

</div>

Here you have fixed the max and minimum y axes for the chart which in my application wont be feasible, as the range can also be negative and also way high. I dont see a way to dynamically change the max and minimums also.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 September 2021 13:37 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/8 "2021-09-06T13:37:46Z")

</div>

Other than building the chart using the ui-template I’m not sure what you could do

---

<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:** [6 September 2021 14:00 UTC](https://discourse.nodered.org/t/clipping-of-charts/50639/9 "2021-09-06T14:00:33Z")

</div>

you should be able to set the max and min via a ui\_control message - [https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)