# Perspectives X-Y Chart for Stacked BarCharts

**URL:** <https://forum.inductiveautomation.com/t/perspectives-x-y-chart-for-stacked-barcharts/115090>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 15, 2026, 4:36pm UTC](https://forum.inductiveautomation.com/t/perspectives-x-y-chart-for-stacked-barcharts/115090 "2026-04-15T16:36:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ignatius](https://avatars.discourse-cdn.com/v4/letter/i/919ad9/32.png) [@ignatius](https://forum.inductiveautomation.com/u/ignatius)\
**Post date:** [April 15, 2026, 4:36pm UTC](https://forum.inductiveautomation.com/t/perspectives-x-y-chart-for-stacked-barcharts/115090/1 "2026-04-15T16:36:54Z")

</div>

Using Perspectives X-Y Chart for Stacked BarCharts, can Total Labels be configured at the top of each stack? If yes, would appreciate some assistance on how this can be done. I tried creating a Total series but was still not successful in displaying the total label.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [April 15, 2026, 5:07pm UTC](https://forum.inductiveautomation.com/t/perspectives-x-y-chart-for-stacked-barcharts/115090/2 "2026-04-15T17:07:45Z")

</div>

Yes, you can. Post some sample data and your current setup details, something to start with.

---

<div class="post-metadata">

**Author:** ![ignatius](https://avatars.discourse-cdn.com/v4/letter/i/919ad9/32.png) [@ignatius](https://forum.inductiveautomation.com/u/ignatius)\
**Post date:** [April 16, 2026, 3:29pm UTC](https://forum.inductiveautomation.com/t/perspectives-x-y-chart-for-stacked-barcharts/115090/3 "2026-04-16T15:29:22Z")

</div>

[XYChart-StackedBarChart-Sample.xlsx](https://forum.inductiveautomation.com/uploads/short-url/7YhuhqE9e3ASC99KdAiXubbnJBi.xlsx) (373.8 KB)

Thanks for the confirmation that it can be done & appreciate it. Attached is some sample data and screenshots of the current setup.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [April 20, 2026, 1:37pm UTC](https://forum.inductiveautomation.com/t/perspectives-x-y-chart-for-stacked-barcharts/115090/4 "2026-04-20T13:37:54Z")

</div>

Sorry for the late reply, based on your provided info, here is an example JSON. Next time, please post the screenshots, and preferably the component JSON, directly in the post. It makes it easier for volunteers, like me, to help.

~~You can copy/paste the below JSON on an XY chart component.~~ The full component JSON is evidently longer than allowed in a single post, so I'll post the series JSON for the total labels only.

> **Chart JSON**
>
> {  
> "name": "Totals",  
> "label": {  
> "text": ""  
> },  
> "visible": true,  
> "hiddenInLegend": false,  
> "defaultState": {  
> "visible": true  
> },  
> "data": {  
> "source": "example",  
> "x": "Plant",  
> "y": "Total"  
> },  
> "xAxis": "Plant",  
> "yAxis": "value",  
> "zIndex": 0,  
> "tooltip": {  
> "enabled": true,  
> "text": "{name}: [bold]{valueY}[/]",  
> "cornerRadius": 3,  
> "pointerLength": 4,  
> "background": {  
> "color": "",  
> "opacity": 1  
> }  
> },  
> "render": "line",  
> "candlestick": {  
> "open": {  
> "x": "",  
> "y": ""  
> },  
> "high": {  
> "x": "",  
> "y": ""  
> },  
> "low": {  
> "x": "",  
> "y": ""  
> },  
> "appearance": {  
> "fill": {  
> "color": "",  
> "opacity": 1  
> },  
> "stroke": {  
> "color": "",  
> "opacity": 1,  
> "width": 1  
> },  
> "stacked": false,  
> "deriveFieldsFromData": {  
> "fill": {  
> "color": "",  
> "opacity": ""  
> },  
> "stroke": {  
> "color": "",  
> "opacity": "",  
> "width": ""  
> }  
> },  
> "heatRules": {  
> "enabled": false,  
> "max": "",  
> "min": "",  
> "dataField": ""  
> }  
> }  
> },  
> "column": {  
> "open": {  
> "x": "",  
> "y": ""  
> },  
> "appearance": {  
> "fill": {  
> "color": "",  
> "opacity": 1  
> },  
> "stroke": {  
> "color": "",  
> "opacity": 1,  
> "width": 1  
> },  
> "width": null,  
> "height": null,  
> "stacked": false,  
> "deriveFieldsFromData": {  
> "fill": {  
> "color": "",  
> "opacity": ""  
> },  
> "stroke": {  
> "color": "",  
> "opacity": "",  
> "width": ""  
> }  
> },  
> "heatRules": {  
> "enabled": false,  
> "max": "",  
> "min": "",  
> "dataField": ""  
> }  
> }  
> },  
> "line": {  
> "open": {  
> "x": "",  
> "y": ""  
> },  
> "appearance": {  
> "connect": true,  
> "tensionX": 1,  
> "tensionY": 1,  
> "minDistance": 0.5,  
> "stroke": {  
> "width": 3,  
> "opacity": 0,  
> "color": "",  
> "dashArray": ""  
> },  
> "fill": {  
> "color": "",  
> "opacity": 0  
> },  
> "bullets": [  
> {  
> "enabled": true,  
> "render": "label",  
> "width": 10,  
> "height": 10,  
> "label": {  
> "text": "{valueY}",  
> "position": {  
> "dx": 0,  
> "dy": -10  
> }  
> },  
> "tooltip": {  
> "enabled": true,  
> "text": "{name}: [bold]{valueY}[/]",  
> "cornerRadius": 3,  
> "pointerLength": 4,  
> "background": {  
> "color": "",  
> "opacity": 1  
> }  
> },  
> "fill": {  
> "color": "",  
> "opacity": 1  
> },  
> "stroke": {  
> "color": "",  
> "width": 1,  
> "opacity": 1  
> },  
> "rotation": 0,  
> "deriveFieldsFromData": {  
> "fill": {  
> "color": "",  
> "opacity": ""  
> },  
> "stroke": {  
> "color": "",  
> "opacity": "",  
> "width": ""  
> },  
> "rotation": ""  
> },  
> "heatRules": {  
> "enabled": false,  
> "max": 100,  
> "min": 2,  
> "dataField": ""  
> }  
> }  
> ]  
> }  
> },  
> "stepLine": {  
> "open": {  
> "x": "",  
> "y": ""  
> },  
> "appearance": {  
> "connect": true,  
> "tensionX": 1,  
> "tensionY": 1,  
> "minDistance": 0.5,  
> "stroke": {  
> "width": 3,  
> "opacity": 1,  
> "color": "",  
> "dashArray": ""  
> },  
> "fill": {  
> "color": "",  
> "opacity": 0  
> },  
> "bullets": [  
> {  
> "enabled": true,  
> "render": "circle",  
> "width": 10,  
> "height": 10,  
> "label": {  
> "text": "{value}",  
> "position": {  
> "dx": 0,  
> "dy": 0  
> }  
> },  
> "tooltip": {  
> "enabled": true,  
> "text": "{name}: [bold]{valueY}[/]",  
> "cornerRadius": 3,  
> "pointerLength": 4,  
> "background": {  
> "color": "",  
> "opacity": 1  
> }  
> },  
> "fill": {  
> "color": "",  
> "opacity": 1  
> },  
> "stroke": {  
> "color": "",  
> "width": 1,  
> "opacity": 1  
> },  
> "rotation": 0,  
> "deriveFieldsFromData": {  
> "fill": {  
> "color": "",  
> "opacity": ""  
> },  
> "stroke": {  
> "color": "",  
> "opacity": "",  
> "width": ""  
> },  
> "rotation": ""  
> },  
> "heatRules": {  
> "enabled": false,  
> "max": 100,  
> "min": 2,  
> "dataField": ""  
> }  
> }  
> ]  
> }  
> }  
> }

---

<div class="post-metadata">

**Author:** ![ignatius](https://avatars.discourse-cdn.com/v4/letter/i/919ad9/32.png) [@ignatius](https://forum.inductiveautomation.com/u/ignatius)\
**Post date:** [April 21, 2026, 5:06pm UTC](https://forum.inductiveautomation.com/t/perspectives-x-y-chart-for-stacked-barcharts/115090/5 "2026-04-21T17:06:40Z")

</div>

Thanks so much! Able to display the Total labels at the top of the stack now. The fontsize of the labels is quite large. Apologies but how can this be configured based on the configuration you provided? Another problem is when the stack is high, the values are truncated or not shown.

[XYChart-StackedBarChart-Sample.xlsx](https://forum.inductiveautomation.com/uploads/short-url/yAf9BarBpNe3ZUqVF0KVhhaDX49.xlsx) (398.9 KB)

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [April 21, 2026, 5:56pm UTC](https://forum.inductiveautomation.com/t/perspectives-x-y-chart-for-stacked-barcharts/115090/6 "2026-04-21T17:56:36Z")

</div>

The labels are not shown because they are above the bars, and I suspect you have your y-axis range blank (auto). You will need to change the max value of the range to always have enough room for the labels.

One way to fix this, is to find the max total value you have then add something to it so there is always room for the labels. For example, `max({this.props.dataSources.example},'Total') + 100`. You would put this expression under `yAxis → value → range → max`.

For the font, you will probably need to add a `fontSize` property under `Styles`. I'm not sure how to target the total labels only. You can search the forum for ideas.