# Bar gauge panel with crusor

**URL:** <https://community.grafana.com/t/bar-gauge-panel-with-crusor/149002>\
**Category:** Bar Gauge Panel\
**Created:** [April 25, 2025, 4:11pm UTC](https://community.grafana.com/t/bar-gauge-panel-with-crusor/149002 "2025-04-25T16:11:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeanchristophecalari](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@jeanchristophecalari](https://community.grafana.com/u/jeanchristophecalari)\
**Post date:** [April 25, 2025, 4:11pm UTC](https://community.grafana.com/t/bar-gauge-panel-with-crusor/149002/1 "2025-04-25T16:11:09Z")

</div>

Hello!

Sorry for my bad english 🙈

I’m looking to make a bar gauge like this pH meter 🙂

 ![image](https://us1.discourse-cdn.com/grafana/original/3X/1/7/172b28654bb39eb80b9c382784ff374525e20be8.png)

I know how to add last value but I can’t find what option I need to choose to obtain this gauge…😭

the best I could get was this:

 ![image](https://us1.discourse-cdn.com/grafana/original/3X/3/8/38e98ae042635b748bb993a70fa95c392bffd5df.png)

Any help please to choose the right option?

Thank you!

---

<div class="post-metadata">

**Author:** ![yosiasz](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/yosiasz/32/45847_2.png) [@yosiasz](https://community.grafana.com/u/yosiasz)\
**Post date:** [April 25, 2025, 4:31pm UTC](https://community.grafana.com/t/bar-gauge-panel-with-crusor/149002/2 "2025-04-25T16:31:02Z")

</div>

other than the arrow and it’s value the rest of the visual is static? I would say go for an svg approach and change the arrow and value data dynamically.

this is just some example

```auto
<!DOCTYPE html>
<html>
<body>
  <svg id="svgContainer" width="100" height="100">
    <path id="arrowPath" d="M10,10 L20,20 L30,10 Z" fill="blue" stroke="black" stroke-width="2"/>
  </svg>
  <button onclick="changeArrow()">Change Arrow</button>
  <script>
    function changeArrow() {
      const arrowPath = document.getElementById("arrowPath");
      arrowPath.setAttribute("d", "M50,10 L70,20 L50,30 Z"); // Change the path to a different arrow shape
      arrowPath.setAttribute("fill", "red"); // Change the fill color
      arrowPath.setAttribute("stroke", "black"); // Change the stroke color
    }
  </script>
</body>
</html>

```

there are plugins that can do that in grafana if you want to go with this above route.

---

<div class="post-metadata">

**Author:** ![jeanchristophecalari](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@jeanchristophecalari](https://community.grafana.com/u/jeanchristophecalari)\
**Post date:** [April 25, 2025, 4:39pm UTC](https://community.grafana.com/t/bar-gauge-panel-with-crusor/149002/3 "2025-04-25T16:39:50Z")

</div>

> [@yosiasz](#):
>
> other than the arrow and it’s value the rest of the visual is static? I would say go for an svg approach and change the arrow and value data dynamically.

thank you ofr your help 🥳

the bar gauge is statique (value only 0 to 14 for pH)  
Can you give me the name of plugin and exemple? 🙈

Thank you very much

---

<div class="post-metadata">

**Author:** ![yosiasz](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/yosiasz/32/45847_2.png) [@yosiasz](https://community.grafana.com/u/yosiasz)\
**Post date:** [April 25, 2025, 5:14pm UTC](https://community.grafana.com/t/bar-gauge-panel-with-crusor/149002/4 "2025-04-25T17:14:54Z")

</div>

maybe you can look at canvas? Oui ou Non?

> **[Pizzeria observability on Grafana Canvas panel | Volkov Labs](https://volkovlabs.io/blog/pizzeria-canvas-20230723/#react-display-component)**
>
> Can you smell it? The aroma of the baked pizza? Do you feel it? The increasing heartbeat rate when you look at the countdown timer where only 30 seconds left? How about joy mixed with pride when watching the number of completed orders increase and...

---

<div class="post-metadata">

**Author:** ![jeanchristophecalari](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@jeanchristophecalari](https://community.grafana.com/u/jeanchristophecalari)\
**Post date:** [April 26, 2025, 7:13am UTC](https://community.grafana.com/t/bar-gauge-panel-with-crusor/149002/5 "2025-04-26T07:13:57Z")

</div>

thank you very much for the exemple! I will try this 😍