# Perspective XY Chart bar colors

**URL:** <https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 12, 2022, 2:36pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967 "2022-09-12T14:36:20Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 12, 2022, 2:36pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/1 "2022-09-12T14:36:20Z")

</div>

Hi all!

I went through this post [XYChart bar colors - Ignition - Inductive Automation Forum](https://forum.inductiveautomation.com/t/xychart-bar-colors/62617) but I cannot find a solution for what I want to achieve.

Basically, I want to get a chart like the shown down, but with the first two columns with different color.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/9/3917aba397361237dc979e5aa69888347bfc3254.png)

I tried several things but I think I am missing something on the x-axis.

- I created three different series (with the same x-axis): for the first bar, for the second bar and for the five last bars.
- I tried null values for the y-axis value.
- I even tried creating different dataSources.

For example, I created three dataSources with the same “t\_stamp” variables.

 ![img1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/2113d7f1b3af784d136fa99237f2006c1fcb8223.png)  
All “units\_num” contains a value.  
 ![img2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/590506a1e703aa681d573d58a563fcef17a9dc23.png)  
Only the last “units\_num” contains a value.  
 ![img3](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b993157bd4443b677131c6ff670ad2406f85ea03.png)  
Only the first “units\_num” contains a value.

Defining only one x-axis and one y-axis (what makes sense to me):

 ![img4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34e4d76f0de81753eef290ba2bc3bde0be69e894.png)

And defining three series:

 ![img5](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/1/a1720f598c1be5c1a8e3653e0e128ff1f494a8e9.png)  
 ![img6](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/49d34ef894d6ba212e375d7b63de1bc3baa4ff14.png)

I get this:

 ![img7](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3a9447f7d68eea2d1f219e0a652a9117a4a6e833.png)

What I do not understand. I did this quick trial in order to understand better how the chart component works and from there, get to my first goal.

What I expect for the graph would be:

- Avg/day (last week): two different coloured (a\_last\_week and b\_last\_week) and x-space-divided columns.

- Avg/day (this week): one coloured (a\_last\_week) and **x-space-centered** column.

- Monday to Thursday: one coloured (a\_last\_week) and **x-space-centered** column.

- Friday: two different coloured (a\_last\_week and trackers) and x-space-divided columns.

PS: remind that my main goal is only one column per x category.

Any tips please?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 12, 2022, 2:58pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/2 "2022-09-12T14:58:35Z")

</div>

You can modify the appearance of each series, so you should be able to use `XYChart.props.series[0].column.appearance.fill` (and stroke) to set the color you’d like.

---

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 12, 2022, 3:08pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/3 "2022-09-12T15:08:48Z")

</div>

Dear @cmallonee please check again my post (I edited it) and still cannot resolve the issue with your comments. Thanks!!!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 13, 2022, 6:34am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/4 "2022-09-13T06:34:35Z")

</div>

you might find something here

> [@XYChart bar colors](https://forum.inductiveautomation.com/t/xychart-bar-colors/62617):
>
> Is it possible to change the color of each individual bar in the XYChart based on let’s say the key? I would like the change the color of the ‘Unplanned Downtime’ bar to red. [xychart]

---

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 14, 2022, 6:30am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/5 "2022-09-14T06:30:34Z")

</div>

Dear @victordcq as you can see in the first post, I mentioned that I already went through that link, and I am still not able to solve it.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 14, 2022, 6:36am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/6 "2022-09-14T06:36:11Z")

</div>

post the configuration of your chart here, (with demo data **not in a binding** )

---

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 14, 2022, 6:38am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/7 "2022-09-14T06:38:26Z")

</div>

> [@g.cascales](#):
>
> For example, I created three dataSources with the same “t\_stamp” variables.

@victordcq this is an example. If not valid, I will create one again

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 14, 2022, 6:44am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/8 "2022-09-14T06:44:39Z")

</div>

yes you have screen shots of the configuration, but just past the whole dict (json) in here  
using the formated text `</>`

---

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 14, 2022, 6:47am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/9 "2022-09-14T06:47:11Z")

</div>

@victordcq how do I do that?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 14, 2022, 6:49am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/10 "2022-09-14T06:49:15Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/126ccedee8dab12fc1643c10b4ccb193cb0abaf7.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/31b85565037f12bf849fb20e812d0bc100782762.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/90195fc39c90e1d6cae7ebc71ce62870b0bf45c5.png)

---

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 14, 2022, 6:56am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/11 "2022-09-14T06:56:01Z")

</div>

@victordcq

dataSources:

```auto
{
  "a_last_week": [
    {
      "t_stamp": "Avg/day \n(last week)",
      "units_num": 7.25
    },
    {
      "t_stamp": "Avg/day \n(this week)",
      "units_num": 7.25
    },
    {
      "t_stamp": "Monday",
      "units_num": 7.25
    },
    {
      "t_stamp": "Tuesday",
      "units_num": 7.25
    },
    {
      "t_stamp": "Wednesday",
      "units_num": 7.25
    },
    {
      "t_stamp": "Thursday",
      "units_num": 7.25
    },
    {
      "t_stamp": "Friday",
      "units_num": 7.25
    }
  ],
  "b_current_week": [
    {
      "t_stamp": "Avg/day \n(last week)",
      "units_num": 7.25
    },
    {
      "t_stamp": "Avg/day \n(this week)",
      "units_num": null
    },
    {
      "t_stamp": "Monday",
      "units_num": null
    },
    {
      "t_stamp": "Tuesday",
      "units_num": null
    },
    {
      "t_stamp": "Wednesday",
      "units_num": null
    },
    {
      "t_stamp": "Thursday",
      "units_num": null
    },
    {
      "t_stamp": "Friday",
      "units_num": null
    }
  ],
  "trackers": [
    {
      "t_stamp": "Avg/day\n(last week)",
      "units_num": null
    },
    {
      "t_stamp": "Avg/day\n(this week)",
      "units_num": null
    },
    {
      "t_stamp": "Monday",
      "units_num": null
    },
    {
      "t_stamp": "Tuesday",
      "units_num": null
    },
    {
      "t_stamp": "Wednesday",
      "units_num": null
    },
    {
      "t_stamp": "Thursday",
      "units_num": null
    },
    {
      "t_stamp": "Friday",
      "units_num": 6
    }
  ]
}

```

xAxes:

```auto
[
  {
    "name": "time",
    "label": {
      "enabled": true,
      "text": "",
      "color": ""
    },
    "inversed": false,
    "visible": true,
    "tooltip": {
      "enabled": true,
      "text": "",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "category",
    "category": {
      "break": {
        "enabled": false,
        "startCategory": "",
        "endCategory": "",
        "size": 0.05
      }
    },
    "date": {
      "baseInterval": {
        "enabled": false,
        "timeUnit": "hour",
        "count": 1,
        "skipEmptyPeriods": false
      },
      "range": {
        "max": "",
        "min": "",
        "useStrict": false
      },
      "break": {
        "enabled": false,
        "startDate": "",
        "endDate": "",
        "size": 0.05
      },
      "inputFormat": "yyyy-MM-dd kk:mm:ss",
      "format": "M/d"
    },
    "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": "#000000",
        "opacity": 1,
        "rotation": 0,
        "verticalCenter": "middle",
        "horizontalCenter": "middle"
      },
      "grid": {
        "color": "#C0C0C0",
        "opacity": 0,
        "dashArray": "",
        "minDistance": 60,
        "position": 0.5
      },
      "font": {
        "size": "",
        "weight": 500
      }
    }
  }
]

```

yAxes:

```auto
[
  {
    "name": "units",
    "label": {
      "enabled": true,
      "text": "Units/day",
      "color": "#000000"
    },
    "inversed": false,
    "visible": true,
    "tooltip": {
      "enabled": true,
      "text": "",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "value",
    "category": {
      "break": {
        "enabled": false,
        "startCategory": "",
        "endCategory": "",
        "size": 0.05
      }
    },
    "date": {
      "baseInterval": {
        "enabled": false,
        "timeUnit": "hour",
        "count": 1,
        "skipEmptyPeriods": false
      },
      "range": {
        "max": "",
        "min": "",
        "useStrict": false
      },
      "break": {
        "enabled": false,
        "startDate": "",
        "endDate": "",
        "size": 0.05
      },
      "inputFormat": "yyyy-MM-dd kk:mm:ss",
      "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": "#000000",
        "opacity": 1,
        "rotation": 0,
        "verticalCenter": "middle",
        "horizontalCenter": "middle"
      },
      "grid": {
        "color": "#C0C0C0",
        "opacity": 0.7,
        "dashArray": "",
        "minDistance": 90,
        "position": 0.5
      },
      "font": {
        "size": 20,
        "weight": 500
      }
    }
  }
]

```

series:

`````auto
[
  {
    "name": "last_week",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "a_last_week",
      "x": "t_stamp",
      "y": "units_num"
    },
    "xAxis": "time",
    "yAxis": "units",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "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": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#FF0000",
          "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": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": false,
            "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": ""
            }
          }
        ]
      }
    },
    "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": ""
            }
          }
        ]
      }
    }
  },
  {
    "name": "current_week",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "b_current_week",
      "x": "t_stamp",
      "y": "units_num"
    },
    "xAxis": "time",
    "yAxis": "units",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "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": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#000000",
          "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": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": false,
            "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": ""
            }
          }
        ]
      }
    },
    "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": ""
            }
          }
        ]
      }
    }
  },
  {
    "name": "week",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "trackers",
      "x": "t_stamp",
      "y": "units_num"
    },
    "xAxis": "time",
    "yAxis": "units",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "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": "",
        "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": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": false,
            "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": ""
            }
          }
        ]
      }
    },
    "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": ""
            }
          }
        ]
      }
    }
  }
]
````Preformatted text`
`````

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 14, 2022, 7:40am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/12 "2022-09-14T07:40:34Z")

</div>

you can copy the whole component at once, but oke this will do i guess xd

Ah this is not the original, but the one you attmpted to change?  
give me the original one

---

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 14, 2022, 7:59am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/13 "2022-09-14T07:59:05Z")

</div>

@victordcq, yes it is the example (not the original), because the original has bindings.

Please find the original attached (too many characters for posting it).  
[original.txt](https://forum.inductiveautomation.com/uploads/short-url/xMp2zeEWVIlzD5WlkUECAlzLlur.txt) (36.0 KB)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 14, 2022, 8:05am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/14 "2022-09-14T08:05:12Z")

</div>

yh nvm it doesnt work with bindings xd

---

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 14, 2022, 8:28am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/15 "2022-09-14T08:28:44Z")

</div>

@victordcq I do not really get what you mean with “yh nvm”.

I can change the bindings for fixed values if you need it.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 14, 2022, 8:52am UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/16 "2022-09-14T08:52:24Z")

</div>

Starting from your base again.

Add a datasource (2) with the two columns you want in a different color. (avg-day/week)  
Set these values (avg-day/week) in the first datasrouce (trackers) to 0  
Create a series with datasource (2), with a different color.  
Set `series[2].column.appearance.stacked = true` (to get not get the white space)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/6/46573d1407409de213e20a41dd0a64b350935dbf.png)

```auto
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "xAxes": [
        {
          "name": "time",
          "label": {
            "enabled": true,
            "text": "Time",
            "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": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d"
          },
          "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": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "process temp",
          "label": {
            "enabled": true,
            "text": "Process Temp",
            "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": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "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": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "process temp",
          "label": {
            "text": "Process Temp"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "t_stamp",
            "y": "process_temp"
          },
          "xAxis": "time",
          "yAxis": "process temp",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "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": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": true,
              "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": ""
                  }
                }
              ]
            }
          }
        },
        {
          "name": "avg",
          "label": {
            "text": "avg"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example_1",
            "x": "t_stamp",
            "y": "process_temp"
          },
          "xAxis": "time",
          "yAxis": "process temp",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "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": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": true,
              "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": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {
        "example": [
          {
            "t_stamp": "Tue Aug 07 2018",
            "process_temp": 0,
            "output_temp": 0
          },
          {
            "t_stamp": "Tue Aug 08 2018",
            "process_temp": 0,
            "output_temp": 0
          },
          {
            "t_stamp": "Tue Aug 09 2018",
            "process_temp": 62,
            "output_temp": 41
          },
          {
            "t_stamp": "Tue Aug 09 2018",
            "process_temp": 62,
            "output_temp": 41
          },
          {
            "t_stamp": "Tue Aug 10 2018",
            "process_temp": 63,
            "output_temp": 37
          },
          {
            "t_stamp": "Tue Aug 11 2018",
            "process_temp": 48,
            "output_temp": 31
          },
          {
            "t_stamp": "Tue Aug 12 2018",
            "process_temp": 54,
            "output_temp": 42
          },
          {
            "t_stamp": "Tue Aug 13 2018",
            "process_temp": 49,
            "output_temp": 38
          },
          {
            "t_stamp": "Tue Aug 14 2018",
            "process_temp": 69,
            "output_temp": 34
          },
          {
            "t_stamp": "Tue Aug 15 2018",
            "process_temp": 73,
            "output_temp": 56
          },
          {
            "t_stamp": "Tue Aug 16 2018",
            "process_temp": 61,
            "output_temp": 32
          }
        ],
        "example_1": [
          {
            "t_stamp": "Tue Aug 07 2018",
            "process_temp": 63,
            "output_temp": 38
          },
          {
            "t_stamp": "Tue Aug 08 2018",
            "process_temp": 59,
            "output_temp": 39
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart_1"
    },
    "position": {
      "x": 12,
      "y": 533,
      "height": 375,
      "width": 435
    },
    "custom": {}
  }
]

```

---

<div class="post-metadata">

**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:** [September 14, 2022, 12:08pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/17 "2022-09-14T12:08:09Z")

</div>

> [@g.cascales](#):
>
> I do not really get what you mean with “yh nvm”.

I'm pretty sure that's millennial-speak for "yeah, never mind".

---

<div class="post-metadata">

**Author:** ![g.cascales](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@g.cascales](https://forum.inductiveautomation.com/u/g.cascales)\
**Post date:** [September 14, 2022, 12:35pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-chart-bar-colors/63967/18 "2022-09-14T12:35:46Z")

</div>

Exactly what I needed! “stacked” property was the key I was looking for. Thanks!!!