# Elements Rotation (Arrow) based on Conditions in Canvas (ELK Stack)

**URL:** <https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183>\
**Category:** Kibana\
**Tags:** canvas, visualisation\
**Created:** [June 5, 2023, 6:39am UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183 "2023-06-05T06:39:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ksaimohan2k](https://avatars.discourse-cdn.com/v4/letter/k/f4b2a3/32.png) [@ksaimohan2k](https://discuss.elastic.co/u/ksaimohan2k)\
**Post date:** [June 5, 2023, 6:39am UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183/1 "2023-06-05T06:39:45Z")

</div>

How do I rotate an arrow based on certain conditions in Canvas? I just want to integrate the CSS rotate function based on certain conditions. Can anyone suggest what functions we should use to rotate the axis?

Below is the code that can help you understand the rotation in general.

```auto
shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=8 maintainAspect=false
| essql query="SELECT Quantity FROM my_ec_demo_index WHERE Quantity < 0"
| switch case={getCell "Quantity"} "when" 0 "then" "180deg" "else" "0deg"
| shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render css=".canvasRenderEl{
transform: rotate(180deg);
}"

```

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [June 5, 2023, 2:19pm UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183/2 "2023-06-05T14:19:35Z")

</div>

use if function and then two render functions under each branch

`... | if condition={...} then={render css="..."} else={render css="..."}`

---

<div class="post-metadata">

**Author:** ![ksaimohan2k](https://avatars.discourse-cdn.com/v4/letter/k/f4b2a3/32.png) [@ksaimohan2k](https://discuss.elastic.co/u/ksaimohan2k)\
**Post date:** [June 5, 2023, 6:42pm UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183/3 "2023-06-05T18:42:46Z")

</div>

Thanks, @ppisljar, for your time and solution. I just wanted to let you know that I modified the code as per your suggestions, but I am getting an output as a table showing the first row with a negative number (only one negative number in the index sample data) in the same direction as the element added (arrow), and it's not rotated. Below is the code I modified for your reference.

```auto
shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=8 maintainAspect=false
| essql query="SELECT Quantity FROM my_ec_demo_index WHERE Quantity < 0"
| if condition={getCell "Quantity"} less_than 0 then={render css=".canvasRenderEl { transform: rotate(180deg); }"} else={render css=".canvasRenderEl { transform: rotate(0deg); }"}
| render 

```

![image](https://us1.discourse-cdn.com/elastic/original/3X/0/d/0dd8900b611e077bbd1fa4f6d00e7b272bc657fb.png)

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [June 6, 2023, 10:53am UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183/4 "2023-06-06T10:53:33Z")

</div>

can you try this:

```auto
essql query="SELECT Quantity FROM my_ec_demo_index WHERE Quantity < 0"
| if condition={getCell "Quantity"} less_than 0 
then={shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=8 maintainAspect=false
| render css=".canvasRenderEl { transform: rotate(180deg); }"} 
else={shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=8 maintainAspect=false
| render css=".canvasRenderEl { transform: rotate(0deg); }"}
```

---

<div class="post-metadata">

**Author:** ![ksaimohan2k](https://avatars.discourse-cdn.com/v4/letter/k/f4b2a3/32.png) [@ksaimohan2k](https://discuss.elastic.co/u/ksaimohan2k)\
**Post date:** [June 7, 2023, 6:28am UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183/5 "2023-06-07T06:28:18Z")

</div>

Thank You @ppisljar for the solution, It Worked Just need to know few things  
1]

> [@ppisljar](#):
>
> `less_than`

As I am new to Canvas, I just want to know if less\_than is a function because I didn't see this in the Canvas Reference Docs. Can I use "lt" instead of that?

[2] Will the previously stated arrow rotational solution apply to time series data as well?

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [June 7, 2023, 9:50am UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183/6 "2023-06-07T09:50:46Z")

</div>

sorry, i was copy pasting from your post.

less\_than does not exist, its simply ignored as are all nonexistend function arguments ("0" as well)  
if you would typoe less\_than=0 it would complain about non existent argument

the condition in your if statement is supposed to return true or false.

---

<div class="post-metadata">

**Author:** ![ksaimohan2k](https://avatars.discourse-cdn.com/v4/letter/k/f4b2a3/32.png) [@ksaimohan2k](https://discuss.elastic.co/u/ksaimohan2k)\
**Post date:** [June 8, 2023, 6:33am UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183/7 "2023-06-08T06:33:33Z")

</div>

Got it ! , Thank you so much for the info and the solution.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 6, 2023, 6:34am UTC](https://discuss.elastic.co/t/elements-rotation-arrow-based-on-conditions-in-canvas-elk-stack/335183/8 "2023-07-06T06:34:01Z")

</div>

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