# Negative value with different color (XY charts)

**URL:** <https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 30, 2025, 12:04pm UTC](https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853 "2025-05-30T12:04:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [May 30, 2025, 12:04pm UTC](https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853/1 "2025-05-30T12:04:22Z")

</div>

Hello,

I know is possible to have different color for positivie and negative using 1 serie for column.

Would it be possible using 1 serie for many columns?

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

Cheers!

---

<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:** [May 30, 2025, 1:31pm UTC](https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853/2 "2025-05-30T13:31:47Z")

</div>

[https://www.amcharts.com/docs/v4/tutorials/different-column-fill-colors-for-positive-and-negative-values/](https://www.amcharts.com/docs/v4/tutorials/different-column-fill-colors-for-positive-and-negative-values/) supports it but Ignition doesn't allow you to use it, as far as I can see.

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [May 30, 2025, 5:02pm UTC](https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853/3 "2025-05-30T17:02:46Z")

</div>

Do you want to apply different color for each column?

---

<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:** [May 30, 2025, 6:09pm UTC](https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853/4 "2025-05-30T18:09:35Z")

</div>

No, he has one series rendered as bars. He wants this:

 ![Negative bars](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/c/1c690e54c2eede0753b2d94d152129abf8123799.png)

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [May 30, 2025, 6:51pm UTC](https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853/5 "2025-05-30T18:51:12Z")

</div>

I think we can do this:  
`column.appearance.fill` and `column.appearance.stroke`

---

<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:** [May 30, 2025, 7:33pm UTC](https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853/6 "2025-05-30T19:33:35Z")

</div>

Go on...

---

<div class="post-metadata">

**Author:** ![CalebM](https://avatars.discourse-cdn.com/v4/letter/c/71c47a/32.png) [@CalebM](https://forum.inductiveautomation.com/u/CalebM)\
**Post date:** [June 2, 2025, 8:46pm UTC](https://forum.inductiveautomation.com/t/negative-value-with-different-color-xy-charts/106853/7 "2025-06-02T20:46:30Z")

</div>

I would use the deriveFieldsFromData within the series column appearance. You'll have to add a new key that contains the color, but this can be computed from the value. Here's a very rough example

> **View**
>
> ```python
> {
> "custom": {
> "data": [
> {
> "x": -33,
> "y": 0
> },
> {
> "x": 49,
> "y": 1
> },
> {
> "x": 61,
> "y": 2
> },
> {
> "x": 8,
> "y": 3
> },
> {
> "x": 36,
> "y": 4
> },
> {
> "x": -79,
> "y": 5
> },
> {
> "x": 76,
> "y": 6
> },
> {
> "x": -66,
> "y": 7
> },
> {
> "x": -41,
> "y": 8
> },
> {
> "x": -71,
> "y": 9
> },
> {
> "x": 1,
> "y": 10
> },
> {
> "x": -23,
> "y": 11
> },
> {
> "x": -16,
> "y": 12
> },
> {
> "x": 47,
> "y": 13
> },
> {
> "x": -12,
> "y": 14
> },
> {
> "x": -64,
> "y": 15
> },
> {
> "x": 84,
> "y": 16
> },
> {
> "x": 45,
> "y": 17
> },
> {
> "x": -59,
> "y": 18
> },
> {
> "x": 76,
> "y": 19
> }
> ]
> },
> "params": {},
> "propConfig": {
> "custom.data": {
> "persistent": true
> }
> },
> "props": {},
> "root": {
> "children": [
> {
> "meta": {
> "name": "XYChart"
> },
> "position": {
> "basis": "375px"
> },
> "propConfig": {
> "props.dataSources.data": {
> "binding": {
> "config": {
> "path": "view.custom.data"
> },
> "transforms": [
> {
> "code": "\tdata \u003d []\n\tfor point in value:\n\t\tx\u003dpoint[\u0027x\u0027]\n\t\tcolor \u003d \"#fc0303\" if x\u003c0 else \"#fccf03\"\n\t\tdata.append(\n\t\t{\n\t\t\"x\":x, \n\t\t\"y\":point[\u0027y\u0027],\n\t\t\"color\":color\n\t\t}\n\t\t)\t\n\t\n\treturn data",
> "type": "script"
> }
> ],
> "type": "property"
> }
> }
> },
> "props": {
> "dataSources": {},
> "series": [
> {
> "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": "color",
> "opacity": ""
> },
> "stroke": {
> "color": "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": "",
> "y": ""
> }
> },
> "data": {
> "source": "data",
> "x": "x",
> "y": "y"
> },
> "defaultState": {
> "visible": true
> },
> "hiddenInLegend": true,
> "label": {
> "text": ""
> },
> "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": "data",
> "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": "value",
> "yAxis": "category",
> "zIndex": 0
> }
> ],
> "xAxes": [
> {
> "appearance": {
> "font": {
> "size": "",
> "weight": 500
> },
> "grid": {
> "color": "",
> "dashArray": "",
> "minDistance": null,
> "opacity": 1,
> "position": 0.5
> },
> "inside": false,
> "labels": {
> "color": "",
> "horizontalCenter": "middle",
> "opacity": 1,
> "rotation": 0,
> "verticalCenter": "middle"
> },
> "opposite": false
> },
> "category": {
> "break": {
> "enabled": false,
> "endCategory": "",
> "size": 0.05,
> "startCategory": ""
> }
> },
> "date": {
> "baseInterval": {
> "count": 1,
> "enabled": false,
> "skipEmptyPeriods": false,
> "timeUnit": "hour"
> },
> "break": {
> "enabled": false,
> "endDate": "",
> "size": 0.05,
> "startDate": ""
> },
> "format": "M/d/yyyy HH:mm:ss",
> "inputFormat": "yyyy-MM-dd kk:mm:ss",
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> }
> },
> "inversed": false,
> "label": {
> "color": "",
> "enabled": true,
> "text": ""
> },
> "name": "value",
> "render": "value",
> "tooltip": {
> "background": {
> "color": "",
> "opacity": 1
> },
> "cornerRadius": 3,
> "enabled": true,
> "pointerLength": 4,
> "text": ""
> },
> "value": {
> "break": {
> "enabled": false,
> "endValue": 100,
> "size": 0.05,
> "startValue": 0
> },
> "format": "#,###.##",
> "logarithmic": false,
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> }
> },
> "visible": true
> }
> ],
> "yAxes": [
> {
> "appearance": {
> "font": {
> "size": "",
> "weight": 500
> },
> "grid": {
> "color": "",
> "dashArray": "",
> "minDistance": null,
> "opacity": 1,
> "position": 0.5
> },
> "inside": false,
> "labels": {
> "color": "",
> "horizontalCenter": "middle",
> "opacity": 1,
> "rotation": 0,
> "verticalCenter": "middle"
> },
> "opposite": false
> },
> "category": {
> "break": {
> "enabled": false,
> "endCategory": "",
> "size": 0.05,
> "startCategory": ""
> }
> },
> "date": {
> "baseInterval": {
> "count": 1,
> "enabled": false,
> "skipEmptyPeriods": false,
> "timeUnit": "hour"
> },
> "break": {
> "enabled": false,
> "endDate": "",
> "size": 0.05,
> "startDate": ""
> },
> "format": "M/d/yyyy HH:mm:ss",
> "inputFormat": "yyyy-MM-dd kk:mm:ss",
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> }
> },
> "inversed": false,
> "label": {
> "color": "",
> "enabled": true,
> "text": ""
> },
> "name": "category",
> "render": "category",
> "tooltip": {
> "background": {
> "color": "",
> "opacity": 1
> },
> "cornerRadius": 3,
> "enabled": true,
> "pointerLength": 4,
> "text": ""
> },
> "value": {
> "break": {
> "enabled": false,
> "endValue": 100,
> "size": 0.05,
> "startValue": 0
> },
> "format": "#,###.##",
> "logarithmic": false,
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> }
> },
> "visible": true
> }
> ]
> },
> "type": "ia.chart.xy"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column"
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```