# Multilayer Donut chart in perspective

**URL:** <https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 27, 2024, 11:37pm UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855 "2024-01-27T23:37:32Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_Lai](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@Richard\_Lai](https://forum.inductiveautomation.com/u/Richard_Lai)\
**Post date:** [January 27, 2024, 11:37pm UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/1 "2024-01-27T23:37:32Z")

</div>

I want to implement the multilayer Donut chart in perspective, seems like not very easy while it is very easy in excel, wondering if any body can help on this or if I can embedded the excel chart in the perspective since it is easy to implement the multilayer donut in excel.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/5/456587e1b0a937ce0203fa89ec5c227429a9277a.png)

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [January 28, 2024, 12:05am UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/2 "2024-01-28T00:05:35Z")

</div>

Pretty easy to implement using [Apex Charts](https://github.com/Kyvis-Labs/ignition-apexcharts-module)

---

<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:** [January 28, 2024, 12:07am UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/3 "2024-01-28T00:07:11Z")

</div>

I think "concentric simple gauge" would be better terminology.

![Concentric simple gauge](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/78f5c4e52eb579c2663d513781925289dcff08e5.png)

You can do this fairly easily with the built-in component.

- You'll need a coordinate container for this since you'll be stacking charts.
- Create the outer gauge and size to suit. Rename it with a 0 on the end. Disable the label.
- Select it and Ctrl-C, Ctrl-P. The pasted version will be placed exactly on top of the original.
- Grab one of the resize handles and move while holding Ctrl-Shift. This will maintain aspect ratio and shrink on the centre point.
- Repeat for the inner gauge.

---

<div class="post-metadata">

**Author:** ![Richard\_Lai](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@Richard\_Lai](https://forum.inductiveautomation.com/u/Richard_Lai)\
**Post date:** [January 28, 2024, 12:17am UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/4 "2024-01-28T00:17:11Z")

</div>

Thank I will give it try.

---

<div class="post-metadata">

**Author:** ![Richard\_Lai](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@Richard\_Lai](https://forum.inductiveautomation.com/u/Richard_Lai)\
**Post date:** [January 28, 2024, 12:18am UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/5 "2024-01-28T00:18:07Z")

</div>

Thank you I will give it try,

---

<div class="post-metadata">

**Author:** ![Richard\_Lai](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@Richard\_Lai](https://forum.inductiveautomation.com/u/Richard_Lai)\
**Post date:** [January 28, 2024, 1:28am UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/6 "2024-01-28T01:28:35Z")

</div>

IS the pie chart or gauge? I have tried to use gauge and I am able to remove the label but has no way to remove the the needle and the other two line.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/e/6e25baa1f63f7da36a4a513745ee81931318b540.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:** [January 28, 2024, 3:52am UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/7 "2024-01-28T03:52:55Z")

</div>

> [@Richard\_Lai](#):
>
> pie chart or gauge?

It's the Simple Gauge component.

---

<div class="post-metadata">

**Author:** ![Richard\_Lai](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@Richard\_Lai](https://forum.inductiveautomation.com/u/Richard_Lai)\
**Post date:** [January 28, 2024, 2:22pm UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/8 "2024-01-28T14:22:19Z")

</div>

I have tried very hard, still can not mimic yours, is there anyway you can share yours by exporting out project?

---

<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:** [January 28, 2024, 2:51pm UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/9 "2024-01-28T14:51:00Z")

</div>

Copy the Coordinate Container code below and paste it into a view.

> **Concentric Simple Gauge chart**
>
> ```auto
> [
> {
> "type": "ia.container.coord",
> "version": 0,
> "props": {
> "style": {
> "borderStyle": "solid",
> "borderWidth": 1,
> "borderColor": "#174AA6"
> }
> },
> "meta": {
> "name": "CoordinateContainer"
> },
> "position": {
> "x": 84,
> "y": 232,
> "height": 233,
> "width": 280
> },
> "custom": {},
> "children": [
> {
> "type": "ia.chart.simple-gauge",
> "version": 0,
> "props": {
> "value": 55,
> "startAngle": 90,
> "endAngle": 405,
> "arc": {
> "width": 10
> },
> "label": {
> "visible": false
> },
> "style": {
> "classes": []
> }
> },
> "meta": {
> "name": "SimpleGauge_0"
> },
> "position": {
> "x": 11,
> "y": 7,
> "height": 219,
> "width": 239
> },
> "custom": {}
> },
> {
> "type": "ia.chart.simple-gauge",
> "version": 0,
> "props": {
> "value": 33,
> "startAngle": 90,
> "endAngle": 405,
> "arc": {
> "width": 10
> },
> "label": {
> "visible": false
> },
> "style": {
> "classes": []
> }
> },
> "meta": {
> "name": "SimpleGauge_1"
> },
> "position": {
> "x": 36,
> "y": 26,
> "height": 179,
> "width": 187
> },
> "custom": {}
> },
> {
> "type": "ia.chart.simple-gauge",
> "version": 0,
> "props": {
> "value": 90,
> "startAngle": 90,
> "endAngle": 405,
> "arc": {
> "width": 10
> },
> "label": {
> "visible": false
> },
> "style": {
> "classes": []
> }
> },
> "meta": {
> "name": "SimpleGauge_2"
> },
> "position": {
> "x": 45.5,
> "y": 47,
> "height": 137,
> "width": 168
> },
> "custom": {}
> }
> ]
> }
> ]
> 
> ```

---

<div class="post-metadata">

**Author:** ![Richard\_Lai](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@Richard\_Lai](https://forum.inductiveautomation.com/u/Richard_Lai)\
**Post date:** [January 28, 2024, 4:39pm UTC](https://forum.inductiveautomation.com/t/multilayer-donut-chart-in-perspective/84855/10 "2024-01-28T16:39:20Z")

</div>

That works. Thanks