# How to create three needles in a single gauge in ignition designer

**URL:** <https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 4, 2024, 5:51am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740 "2024-03-04T05:51:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anjali\_manogna](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@Anjali\_manogna](https://forum.inductiveautomation.com/u/Anjali_manogna)\
**Post date:** [March 4, 2024, 5:51am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/1 "2024-03-04T05:51:23Z")

</div>

In a gauge there need to be three needles how can we achieve that?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 4, 2024, 8:17am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/2 "2024-03-04T08:17:39Z")

</div>

1. Please edit your question and tag as Vision or Perspective.
2. Which component do you want to use?
3. Can you give an example imagev of how this should look?
4. What information are you trying to convey?

---

<div class="post-metadata">

**Author:** ![Anjali\_manogna](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@Anjali\_manogna](https://forum.inductiveautomation.com/u/Anjali_manogna)\
**Post date:** [March 4, 2024, 9:35am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/3 "2024-03-04T09:35:21Z")

</div>

I want to use simple gauge component and i need three needles for the outer axis is it possible  
 ![Screenshot (120)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/6/96a228c123ad863b8218255eab50a21cc0ae8d10.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 4, 2024, 9:50am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/4 "2024-03-04T09:50:07Z")

</div>

The Simple Gauge component doesn't have a needle.  
Do you mean the Gauge component?

---

<div class="post-metadata">

**Author:** ![Anjali\_manogna](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@Anjali\_manogna](https://forum.inductiveautomation.com/u/Anjali_manogna)\
**Post date:** [March 4, 2024, 9:52am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/5 "2024-03-04T09:52:59Z")

</div>

Yes  
 ![Screenshot (121)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3cea3a10f34ac916daeb23a5c153ed9302bba64e.png)

---

<div class="post-metadata">

**Author:** ![Usha\_Vilash](https://avatars.discourse-cdn.com/v4/letter/u/b5a626/32.png) [@Usha\_Vilash](https://forum.inductiveautomation.com/u/Usha_Vilash)\
**Post date:** [March 4, 2024, 10:09am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/6 "2024-03-04T10:09:10Z")

</div>

Design a custom component for the gauge with three needle elements. Use scripting to control the position and rotation of each needle based on your data or requirements. Bind the data source to each needle to ensure they accurately reflect the values you want to display and from the [official website](https://docs.inductiveautomation.com/docs/8.1/ignition-modules) you can get more detail information about this.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 4, 2024, 10:10am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/7 "2024-03-04T10:10:24Z")

</div>

- Create a Coordinate view.
- Drop three Gauge components onto the view. Offset them initially while you set them up. Later you will move them all to the same origin.
- Create parameters on the view for minValue, maxValue, gaugeValue0, gaugeValue1, gaugeValue2.
- On the view → Perspective Property Editor → PARAMS, create an array property "ranges". On the chart component select ranges, right-click, copy and then paste that structure into the view's ranges property that you have just created.
- Find which gauge is at the back of the Z-order. This one will display the axis and numbers. The other two will have them hidden. To hide the range color bands on the top two gauges set,  
`outerAxis.ranges.0.color : #00000000`.  
The last two hex digits are the opacity and `00` sets it to transparent.
- On the bottom gauge `outerAxis.ranges` create a property binding to the view's `ranges`.
- Bind each of the gauges' `value` properties to one of the gaugeValue0, gaugeValue1 or gaugeValue2.
- Modify each gauge's `outerAxis.needle.color` property to suit.

---

<div class="post-metadata">

**Author:** ![Anjali\_manogna](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@Anjali\_manogna](https://forum.inductiveautomation.com/u/Anjali_manogna)\
**Post date:** [March 4, 2024, 11:23am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/8 "2024-03-04T11:23:13Z")

</div>

thank you I have got it.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 4, 2024, 11:57am UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/9 "2024-03-04T11:57:34Z")

</div>

Hit the "Solution" link on the post which answered your question. This marks it solved in the main index as well. Thanks.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 4, 2024, 12:57pm UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/10 "2024-03-04T12:57:26Z")

</div>

Nothing against @Transistor's solution, it defiantly works. However, if you end up needing to have multiple of these "gauge stacks" on a view your performance can drop dramatically. In that case the better solution is to use an SVG solution.

> [@Perspective, faster page](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/35):
>
> Okay, I had a bit of free time today, so here is a complete SVG solution. You could do the Label as SVG text as well, or a gauge needle if you wanted, I haven't gone that far. Just a little example of the power of using the Ignition Designer to add SVG elements. I didn't include the label for the example. Note: All of this (outside of the calculations needed to find the points for the shape) was done inside of the designer (yes I can be somewhat of a masochist at times. rofl). First a s…

This was for a simple gauge, but could be modified to produce multiple needles as well.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 4, 2024, 12:59pm UTC](https://forum.inductiveautomation.com/t/how-to-create-three-needles-in-a-single-gauge-in-ignition-designer/86740/11 "2024-03-04T12:59:18Z")

</div>

> [@lrose](#):
>
> Nothing against @Transistor's solution, ... your performance can drop dramatically.

That's a valid objection! 🥲
