# Floating Bar Chart / Non-additive Stacking? **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [January 22, 2026, 4:03pm UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485 "2026-01-22T16:03:38Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Robert\_McIlvenna](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/robert_mcilvenna/32/80238_2.png) [@Robert\_McIlvenna](https://forum.inductiveautomation.com/u/Robert_McIlvenna)\ **Post date:** [January 22, 2026, 4:03pm UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485/1 "2026-01-22T16:03:38Z")
Hello, I’m trying to make a bar chart in perspective using the XY Chart, similar to the [XY Chart Example - Gantt Chart | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-chart-palette/perspective-xy-chart/xy-chart-example-gantt-chart), but vertical and using values instead of time. I have flipped the axis on the chart, and change the time to value, this mostly works. And with time it actually does work with absolute times However I need the chart to be stacked and series[1].column.stacked adds the values up Non stacked: the values are fine ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8fe477512021eb3e2659d491232110855b75fdc.png) stacked: True - The values are now added? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/77bcc46a675c8323006a183fcb1f739eff92a65d.png) I could adjust the values myself, just subtracting the sum of each previous row to the values, but that doesn’t seem like the best option, and I can’t help but feel like I’m missing something about the component. Is there a better way to do this? Edit: The candlestick render type did not work, as the colors on that chart were not adjustable, even with derivefieldsfromdata ---
**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:** [January 23, 2026, 1:08am UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485/2 "2026-01-23T01:08:44Z")
For better configuration, many opt for a third-party module like embr-charts. > [@Musson Industrial’s Embr-Charts Module](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618): > > Embr-Charts Musson Industrial is excited to announce the release of embr-charts, an Ignition module that adds a collection of enhanced Perspective charting components. Chart.js Component This initial release contains a [Chart.js](https://www.chartjs.org/) component. [https://github.com/mussonindustrial/embr/raw/main/modules/embr-charts/docs/examples/chart-js.png](https://github.com/mussonindustrial/embr/raw/main/modules/embr-charts/docs/examples/chart-js.png) Chart.js renders chart elements on an HTML5 canvas unlike other D3.js-based charting libraries that render as SVG. Canvas rendering makes Chart.js very performa… ---
**Author:** ![Robert\_McIlvenna](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/robert_mcilvenna/32/80238_2.png) [@Robert\_McIlvenna](https://forum.inductiveautomation.com/u/Robert_McIlvenna)\ **Post date:** [January 23, 2026, 1:28am UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485/3 "2026-01-23T01:28:09Z")
Thanks and I’d love to, but considering this project has to go out to many gateways, another module to update and manage across all of them is a bit too much hassle for this application ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [January 23, 2026, 2:11am UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485/4 "2026-01-23T02:11:36Z")
“This project is too big to use time-saving/quality improving resources.” No sympathy 🤷🏻‍♂️ ---
**Author:** ![Robert\_McIlvenna](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/robert_mcilvenna/32/80238_2.png) [@Robert\_McIlvenna](https://forum.inductiveautomation.com/u/Robert_McIlvenna)\ **Post date:** [January 23, 2026, 1:07pm UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485/5 "2026-01-23T13:07:31Z")
Rude ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [January 23, 2026, 1:44pm UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485/6 "2026-01-23T13:44:54Z")
It may be rude, but us geeks tend to approach the autism spectrum, if not in it, and blunt truth sometimes escapes us. Ignition is modular, and IA **encourages** module development to plug gaps in their native modules. I'm with Ben. No sympathy. ---
**Author:** ![Robert\_McIlvenna](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/robert_mcilvenna/32/80238_2.png) [@Robert\_McIlvenna](https://forum.inductiveautomation.com/u/Robert_McIlvenna)\ **Post date:** [January 23, 2026, 2:16pm UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485/7 "2026-01-23T14:16:29Z")
dark mode 👻 ---
**Author:** ![Robert\_McIlvenna](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/robert_mcilvenna/32/80238_2.png) [@Robert\_McIlvenna](https://forum.inductiveautomation.com/u/Robert_McIlvenna)\ **Post date:** [February 3, 2026, 1:40pm UTC](https://forum.inductiveautomation.com/t/floating-bar-chart-non-additive-stacking/113485/8 "2026-02-03T13:40:34Z")
```python [ { "type": "ia.chart.xy", "version": 0, "props": { "cursor": { "series": "mySeries" }, "scrollBars": { "horizontal": { "enabled": false, "series": "mySeries" }, "vertical": { "enabled": false, "series": "mySeries" } }, "xAxes": [ { "name": "Operator", "label": { "enabled": false, "text": "Process Temp", "color": "" }, "visible": true, "tooltip": { "enabled": true, "text": "", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "inversed": false, "render": "date", "category": { "break": { "enabled": false, "startCategory": "", "endCategory": "", "size": 0.05 } }, "date": { "baseInterval": { "enabled": false, "timeUnit": "minute", "count": 2, "skipEmptyPeriods": true }, "range": { "max": "", "min": "", "useStrict": false }, "break": { "enabled": false, "startDate": "", "endDate": "", "size": 0.05 }, "inputFormat": "SSSSSSSSSS", "format": "M/d/yyyy HH:mm:ss" }, "value": { "range": { "max": "", "min": "", "useStrict": false }, "logarithmic": false, "break": { "enabled": false, "startValue": 0, "endValue": 100, "size": 0.05 }, "format": "#,###.##" }, "appearance": { "opposite": false, "inside": false, "labels": { "color": "", "opacity": 1, "rotation": 0, "verticalCenter": "middle", "horizontalCenter": "middle" }, "grid": { "color": "", "opacity": 1, "dashArray": "", "minDistance": null, "position": 1 }, "font": { "size": "", "weight": 500 } } } ], "yAxes": [ { "name": "time", "label": { "enabled": true, "text": "Duration", "color": "" }, "visible": true, "tooltip": { "enabled": true, "text": "", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "inversed": false, "render": "value", "category": { "break": { "enabled": false, "startCategory": "", "endCategory": "", "size": 0.05 } }, "date": { "baseInterval": { "enabled": false, "timeUnit": "minute", "count": 1, "skipEmptyPeriods": false }, "range": { "max": "", "min": "", "useStrict": false }, "break": { "enabled": false, "startDate": "", "endDate": "", "size": 0.05 }, "inputFormat": "ss", "format": "SSS" }, "value": { "range": { "max": "", "min": "", "useStrict": false }, "logarithmic": false, "break": { "enabled": false, "startValue": 0, "endValue": 100, "size": 0.05 }, "format": "#,###.##" }, "appearance": { "opposite": false, "inside": false, "labels": { "color": "", "opacity": 1, "rotation": 0, "verticalCenter": "middle", "horizontalCenter": "middle" }, "grid": { "color": "", "opacity": 1, "dashArray": "", "minDistance": 10, "position": 0.5 }, "font": { "size": "", "weight": 500 } } } ], "series": [ { "name": "mySeries", "label": { "text": "RUNNING" }, "visible": true, "hiddenInLegend": false, "defaultState": { "visible": true }, "data": { "source": "example", "x": "name2", "y": "toDuration" }, "xAxis": "Operator", "yAxis": "time", "zIndex": 0, "tooltip": { "enabled": true, "text": "{name}: [bold]{fromDuration} - {toDuration}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "render": "column", "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": "name", "y": "fromDuration" }, "appearance": { "fill": { "color": "#1ABD1D", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "stacked": false, "width": null, "height": null, "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": 1, "color": "", "dashArray": "" }, "fill": { "opacity": 0, "color": "" }, "bullets": [ { "enabled": false, "render": "circle", "width": 10, "height": 10, "label": { "text": "{value}", "position": { "dx": 0, "dy": 0 } }, "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "rotation": 0, "tooltip": { "enabled": true, "text": "{name}: [bold]{valueY}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "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": { "opacity": 0, "color": "" }, "bullets": [ { "enabled": true, "render": "circle", "width": 10, "height": 10, "label": { "text": "{value}", "position": { "dx": 0, "dy": 0 } }, "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "rotation": 0, "tooltip": { "enabled": true, "text": "{name}: [bold]{valueY}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" }, "rotation": "" }, "heatRules": { "enabled": false, "max": 100, "min": 2, "dataField": "" } } ] } } }, { "candlestick": { "appearance": { "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" } }, "fill": { "color": "", "opacity": 1 }, "heatRules": { "dataField": "", "enabled": false, "max": "", "min": "" }, "stacked": false, "stroke": { "color": "", "opacity": 1, "width": 1 } }, "high": { "x": "", "y": "" }, "low": { "x": "", "y": "" }, "open": { "x": "", "y": "" } }, "column": { "appearance": { "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" } }, "fill": { "color": "", "opacity": 1 }, "heatRules": { "dataField": "", "enabled": false, "max": "", "min": "" }, "height": null, "stacked": false, "stroke": { "color": "", "opacity": 1, "width": 1 }, "width": null }, "open": { "x": "name", "y": "fromDuration" } }, "data": { "source": "example2", "x": "name2", "y": "toDuration" }, "defaultState": { "visible": true }, "hiddenInLegend": false, "label": { "text": "Test" }, "line": { "appearance": { "bullets": [ { "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "rotation": "", "stroke": { "color": "", "opacity": "", "width": "" } }, "enabled": false, "fill": { "color": "", "opacity": 1 }, "heatRules": { "dataField": "", "enabled": false, "max": 100, "min": 2 }, "height": 10, "label": { "position": { "dx": 0, "dy": 0 }, "text": "{value}" }, "render": "circle", "rotation": 0, "stroke": { "color": "", "opacity": 1, "width": 1 }, "tooltip": { "background": { "color": "", "opacity": 1 }, "cornerRadius": 3, "enabled": true, "pointerLength": 4, "text": "{name}: [bold]{valueY}[/]" }, "width": 10 } ], "connect": true, "fill": { "color": "", "opacity": 0 }, "minDistance": 0.5, "stroke": { "color": "", "dashArray": "", "opacity": 1, "width": 3 }, "tensionX": 1, "tensionY": 1 }, "open": { "x": "", "y": "" } }, "name": "mySeries2", "render": "column", "stepLine": { "appearance": { "bullets": [ { "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "rotation": "", "stroke": { "color": "", "opacity": "", "width": "" } }, "enabled": true, "fill": { "color": "", "opacity": 1 }, "heatRules": { "dataField": "", "enabled": false, "max": 100, "min": 2 }, "height": 10, "label": { "position": { "dx": 0, "dy": 0 }, "text": "{value}" }, "render": "circle", "rotation": 0, "stroke": { "color": "", "opacity": 1, "width": 1 }, "tooltip": { "background": { "color": "", "opacity": 1 }, "cornerRadius": 3, "enabled": true, "pointerLength": 4, "text": "{name}: [bold]{valueY}[/]" }, "width": 10 } ], "connect": true, "fill": { "color": "", "opacity": 0 }, "minDistance": 0.5, "stroke": { "color": "", "dashArray": "", "opacity": 1, "width": 3 }, "tensionX": 1, "tensionY": 1 }, "open": { "x": "", "y": "" } }, "tooltip": { "background": { "color": "", "opacity": 1 }, "cornerRadius": 3, "enabled": true, "pointerLength": 4, "text": "{name}: [bold]{valueY}[/]" }, "visible": true, "xAxis": "Operator", "yAxis": "time", "zIndex": 0 } ], "dataSources": { "example": [ { "color": "#0FFF30", "fromDuration": 12, "name": 1769444100, "name2": 1769444500, "toDuration": 13 }, { "color": "#00FF30", "fromDuration": 11, "name": 1769445100, "name2": 1769445600, "toDuration": 2 }, { "color": "#00FF30", "fromDuration": 4, "name": 1769446100, "name2": 1769446600, "toDuration": 5 }, { "color": "#00FF30", "fromDuration": 2, "name": 1769446100, "name2": 1769446600, "toDuration": 10 } ], "example2": [ { "fromDuration": 3, "name": 1769444100, "name2": 1769444500, "toDuration": 6 }, { "fromDuration": 3, "name": 1769445100, "name2": 1769445600, "toDuration": 5 }, { "fromDate": 0, "name": 1769446100, "name2": 1769446600, "toDuration": 7 } ] } }, "meta": { "name": "ChronoXYChart_4" }, "position": { "x": 123.49100000000001, "y": 833, "height": 515, "width": 704 }, "custom": {} } ] ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b92eb86f3d61764ce5a313c86f1ff46f6be7ee09.png) I meant to post this when I found this, but using series[\*].column.open allows you to have more control over it and does what I want, and stacking is disabled. Using skip empty time also makes it more uniform. Just add a small delta to the time so it isn’t just a pixel slice. It can also be flipped so time is on the Y-Axis, and you use categories or values.