# XY Chart multiple bars in one category

**URL:** <https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325>\
**Category:** Ignition\
**Created:** [May 13, 2024, 6:26pm UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325 "2024-05-13T18:26:16Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pico\_Sankari](https://avatars.discourse-cdn.com/v4/letter/p/aeb1de/32.png) [@Pico\_Sankari](https://forum.inductiveautomation.com/u/Pico_Sankari)\
**Post date:** [May 13, 2024, 6:26pm UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/1 "2024-05-13T18:26:16Z")

</div>

I would like to display multiple bars in a given category on an XY chart without making a bunch of different series. My dataset looks like this:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/0226c01de20d1b30ff0ae674a220fc0fc7be8310.png)  
I would like each entry to be its own bar (equally spaced on the x-axis, so I can't just use the date it was entered) and to have the x-axis labeled with its category. I've tried assigning each entry an ID number, but then I can't get the x-axis labeled properly. What is the best way to do this?

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 14, 2024, 2:48am UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/2 "2024-05-14T02:48:44Z")

</div>

Want to understand your requirement.  
Are you searching for something rendered below. Here each month will display all the categories.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/d/dd22b9902f49e60325aeb4ee65983fff6676bd94.png)

It will be nice if you can post your sample data here.

---

<div class="post-metadata">

**Author:** ![Pico\_Sankari](https://avatars.discourse-cdn.com/v4/letter/p/aeb1de/32.png) [@Pico\_Sankari](https://forum.inductiveautomation.com/u/Pico_Sankari)\
**Post date:** [May 15, 2024, 10:08pm UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/3 "2024-05-15T22:08:15Z")

</div>

This is what I would want to display. I know how to make this happen by adding multiple series, but this seems impractical with this much data in each category. What is the best way to share my data? Upload a CSV?

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 16, 2024, 1:34am UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/4 "2024-05-16T01:34:15Z")

</div>

The chart I posted needs at least 2 series.  
I believe you can upload csv here but JSON will be quick to test.

Below data is from `props.dataSources.example` of the example chart I posted.

```python
[
  {
    "Month": "3",
    "Category": "Cat A",
    "Combine": "Cat A 3",
    "Color": "#FF0000",
    "Defects": 1
  },
  {
    "Month": "3",
    "Category": "Cat B",
    "Combine": "Cat B 3",
    "Color": "#FFFF00",
    "Defects": 2
  },
  {
    "Month": "4",
    "Category": "Cat A",
    "Combine": "Cat A 4",
    "Color": "#FF0000",
    "Defects": 4
  },
  {
    "Month": "4",
    "Category": "Cat B",
    "Combine": "Cat B 4",
    "Color": "#FFFF00",
    "Defects": 1
  }
]

```

---

<div class="post-metadata">

**Author:** ![Pico\_Sankari](https://avatars.discourse-cdn.com/v4/letter/p/aeb1de/32.png) [@Pico\_Sankari](https://forum.inductiveautomation.com/u/Pico_Sankari)\
**Post date:** [May 16, 2024, 4:59pm UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/5 "2024-05-16T16:59:25Z")

</div>

How is your x-axis configured to display the 'Month' value while placing the columns with the 'Category' value? I'm not sure how to get my data in JSON format and I think if I can see your x-axis configuration I can figure this out

---

<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 16, 2024, 5:30pm UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/6 "2024-05-16T17:30:12Z")

</div>

I think your use of the XY Chart component for this will be of limited value to the users. If you insist then consider using a vertical guage and a couple of labels in a view that can be used in a flex repeater. One instance per bar.

---

<div class="post-metadata">

**Author:** ![Pico\_Sankari](https://avatars.discourse-cdn.com/v4/letter/p/aeb1de/32.png) [@Pico\_Sankari](https://forum.inductiveautomation.com/u/Pico_Sankari)\
**Post date:** [May 16, 2024, 7:43pm UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/7 "2024-05-16T19:43:59Z")

</div>

I agree that it's not a particularly valuable change, but people keep asking for it because it's what they have in Excel 🙂 Is a flex repeater going to work with thousands of bars?

---

<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 16, 2024, 8:11pm UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/8 "2024-05-16T20:11:31Z")

</div>

> [@Pico\_Sankari](#):
>
> ... thousands of bars?

No. Perspective would probably gum up the browser. Thousands of bars suggests several years worth of daily data. Is this really what they want?

Rethink this and offer them something much better! Surely an XY or Time Series chart with month-day on the X-axis gives the information much more clearly? What insights is the chart supposed to give them? A continuous trend? Comparison between the weeks / months / years? Would it help to hover on a legend key and highlight those bars or that trend?

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 17, 2024, 1:07am UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/9 "2024-05-17T01:07:16Z")

</div>

Here is the complete json.

> **XYChart component**
>
> ```python
> [
> {
> "type": "ia.chart.xy",
> "version": 0,
> "props": {
> "xAxes": [
> {
> "name": "cat",
> "label": {
> "enabled": false,
> "text": "Cat",
> "color": ""
> },
> "visible": true,
> "tooltip": {
> "enabled": true,
> "text": "",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "inversed": false,
> "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": "",
> "opacity": 1,
> "rotation": 0,
> "verticalCenter": "middle",
> "horizontalCenter": "middle"
> },
> "grid": {
> "color": "",
> "opacity": 0,
> "dashArray": "",
> "minDistance": 60,
> "position": 0.5
> },
> "font": {
> "size": "",
> "weight": 500
> }
> }
> },
> {
> "appearance": {
> "font": {
> "size": "",
> "weight": 500
> },
> "grid": {
> "color": "",
> "dashArray": "",
> "minDistance": null,
> "opacity": 0,
> "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": false,
> "text": ""
> },
> "name": "dummy",
> "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
> }
> ],
> "yAxes": [
> {
> "name": "def",
> "label": {
> "enabled": true,
> "text": "Defects",
> "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": "Dummy",
> "label": {
> "text": "Month"
> },
> "visible": false,
> "hiddenInLegend": true,
> "defaultState": {
> "visible": true
> },
> "data": {
> "source": "example",
> "x": "Month",
> "y": "Defects"
> },
> "xAxis": "dummy",
> "yAxis": "def",
> "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": 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": "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": "",
> "y": ""
> }
> },
> "data": {
> "source": "example",
> "x": "Combine",
> "y": "Defects"
> },
> "defaultState": {
> "visible": true
> },
> "hiddenInLegend": true,
> "label": {
> "text": "Defects"
> },
> "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": "Defects",
> "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": "cat",
> "yAxis": "def",
> "zIndex": 0
> }
> ]
> },
> "meta": {
> "name": "XYChart"
> },
> "position": {
> "x": 12,
> "y": 3.5,
> "height": 324,
> "width": 779
> },
> "custom": {},
> "propConfig": {
> "props.dataSources": {
> "binding": {
> "config": {
> "fallbackDelay": 2.5,
> "mode": "direct",
> "tagPath": "[default]Chart Data Sample"
> },
> "transforms": [
> {
> "code": "\tpyDS = system.dataset.toPyDataSet(value)\n\tColumn_Name = value.columnNames\n\tData = []\n\tfor row in pyDS:\n\t\tData.append({K:V for K,V in zip(Column_Name,row)})\n\t\tData[-1][\"Combine\"] = \"%s %s\"%(Data[-1][\"Category\"],Data[-1][\"Month\"])\n\t\tif Data[-1][\"Category\"] == \"Cat A\":\n\t\t\tData[-1][\"Color\"] = \"#FF0000\"\n\t\telse:\n\t\t\tData[-1][\"Color\"] = \"#FFFF00\"\n\treturn {\"example\":Data}",
> "type": "script"
> }
> ],
> "type": "tag"
> }
> }
> }
> }
> ]
> 
> ```

Import Sample Data Tag  
[Chart Data Sample.json](https://forum.inductiveautomation.com/uploads/short-url/4itsyUD072PFtmH0aUTH2wyQwxO.json) (391 Bytes)

---

<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 17, 2024, 1:26am UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/10 "2024-05-17T01:26:30Z")

</div>

Ujwal, are we missing `[default]Chart Data Sample` used in the datasources binding?

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 17, 2024, 1:32am UTC](https://forum.inductiveautomation.com/t/xy-chart-multiple-bars-in-one-category/90325/11 "2024-05-17T01:32:35Z")

</div>

Transistor, Thanks for reminding me. Added on the same post.