# XY Chart - OPC Arrays

**URL:** <https://forum.inductiveautomation.com/t/xy-chart-opc-arrays/84069>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 10, 2024, 7:28pm UTC](https://forum.inductiveautomation.com/t/xy-chart-opc-arrays/84069 "2024-01-10T19:28:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![DWhitaker](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@DWhitaker](https://forum.inductiveautomation.com/u/DWhitaker)\
**Post date:** [January 10, 2024, 7:28pm UTC](https://forum.inductiveautomation.com/t/xy-chart-opc-arrays/84069/1 "2024-01-10T19:28:32Z")

</div>

Hi All,

Looking for some guidance on using the XY chart to display two OPC arrays, one on the x and one on the y axis.

I have got this done using the BIJC plotly element, but the native xychart seems a little more configurable, I just can't seem to find how to wrangle the data into the correct format.

Thanks

---

<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:** [January 10, 2024, 8:15pm UTC](https://forum.inductiveautomation.com/t/xy-chart-opc-arrays/84069/2 "2024-01-10T20:15:42Z")

</div>

This looks like a Perspective question but if you add the tag to your question title it will remove any doubt.

Can you post a dataset and a mockup of what you're trying to achieve?

---

<div class="post-metadata">

**Author:** ![DWhitaker](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@DWhitaker](https://forum.inductiveautomation.com/u/DWhitaker)\
**Post date:** [January 10, 2024, 9:35pm UTC](https://forum.inductiveautomation.com/t/xy-chart-opc-arrays/84069/3 "2024-01-10T21:35:12Z")

</div>

Correct - this is perspective - I have added the tag.

Dataset is simply a pair of tags - each tag is an array of floats:

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

I want an xy chart to display in the same way this plotly chart is displaying:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1e4172c89ec8f68f062ddf32999008c2c51a6ca.png)

This is simply configured by linking the tag directly to the x and y:

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

But i'm looking to use the native object as it has many more properties I can use going forward.

Thanks

---

<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:** [January 10, 2024, 10:19pm UTC](https://forum.inductiveautomation.com/t/xy-chart-opc-arrays/84069/4 "2024-01-10T22:19:06Z")

</div>

Paste the component below into your view.

> **XY Chart JSON**
>
> ```auto
> [
> {
> "type": "ia.chart.xy",
> "version": 0,
> "props": {
> "title": {
> "text": "Chroma Results"
> },
> "xAxes": [
> {
> "name": "xAxis",
> "label": {
> "enabled": true,
> "text": "Time",
> "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"
> },
> "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": "yAxis",
> "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": "XYplot",
> "label": {
> "text": "Process Temp"
> },
> "visible": true,
> "hiddenInLegend": false,
> "defaultState": {
> "visible": true
> },
> "data": {
> "source": "mergedData",
> "x": "chromX",
> "y": "chromY"
> },
> "xAxis": "xAxis",
> "yAxis": "yAxis",
> "zIndex": 0,
> "tooltip": {
> "enabled": true,
> "text": "{name}: [bold]{valueY}[/]",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "render": "line",
> "candlestick": {
> "open": {
> "x": "",
> "y": ""
> },
> "high": {
> "x": "",
> "y": ""
> },
> "low": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "fill": {
> "color": "",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "opacity": 1,
> "width": 1
> },
> "stacked": false,
> "deriveFieldsFromData": {
> "fill": {
> "color": "",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> }
> },
> "heatRules": {
> "enabled": false,
> "max": "",
> "min": "",
> "dataField": ""
> }
> }
> },
> "column": {
> "open": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "fill": {
> "color": "",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "opacity": 1,
> "width": 1
> },
> "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": ""
> }
> }
> ]
> }
> }
> }
> ],
> "dataSources": {}
> },
> "meta": {
> "name": "XYChart"
> },
> "position": {
> "x": 49,
> "y": 48,
> "height": 522,
> "width": 811
> },
> "custom": {},
> "propConfig": {
> "props.dataSources.mergedData": {
> "binding": {
> "type": "expr-struct",
> "config": {
> "struct": {
> "xData": "{[default]chrom_x}",
> "yData": "{[default]chrom_y}"
> },
> "waitOnAll": true
> },
> "transforms": [
> {
> "code": "\toutput = []\n\tfor i in range(len(value['xData'])):\n\t\toutput.append({\n\t\t\t\"chromX\": value['xData'][i], \n\t\t\t\"chromY\": value['yData'][i]\n\t\t})\n\treturn output ",
> "type": "script"
> }
> ]
> }
> }
> }
> }
> ]
> 
> ```

Pay particular attention to the `dataSources` property binding. Have a look at the magic in there and correct the paths to your `chrom_x` and `chrom_y` tags using the Browse Properties tree (to the right of the script editor).

Someone better with Python might have a more streamlined bit of code but mine should be easy to follow.

---

<div class="post-metadata">

**Author:** ![DWhitaker](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@DWhitaker](https://forum.inductiveautomation.com/u/DWhitaker)\
**Post date:** [January 11, 2024, 2:32pm UTC](https://forum.inductiveautomation.com/t/xy-chart-opc-arrays/84069/5 "2024-01-11T14:32:05Z")

</div>

Oh nice!

Thanks - I can see how you got there. Appreciate the help