# XY Chart - Line Chart Target Area

**URL:** <https://forum.inductiveautomation.com/t/xy-chart-line-chart-target-area/92632>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 1, 2024, 2:59pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-chart-target-area/92632 "2024-07-01T14:59:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zachary](https://avatars.discourse-cdn.com/v4/letter/z/90db22/32.png) [@Zachary](https://forum.inductiveautomation.com/u/Zachary)\
**Post date:** [July 1, 2024, 2:59pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-chart-target-area/92632/1 "2024-07-01T14:59:40Z")

</div>

I'm trying to recreate the Line Chart Target Area by following the below documentation.

> **[XY Chart Example - Line Chart Target Area | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-chart-palette/perspective-xy-chart/xy-chart-example-line-chart-target-area)**
>
> This example demonstrates how to utilize the line.open property to create a target zone. Target zones can be used to represent acceptable values for the data that is displayed to make it obvious if values are good or bad.

I've followed the instructions on this documentation and have gotten the same issue of the chart just breaking. This is what it looks like.

![Screenshot 2024-07-01 100830](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/b/8b46c365b3f1441244d1f5d3d41d99e73dccb13f.png)

Here is the JSON for the relevant areas that are spoken about in the documentation. Trying to make this all as readable as possible. Thank you in advance for anyone who can help me with this!

**Data Sources and Example**

```python
{
    "date": "2023-7-12 07:00:00",
    "actual": 128,
    "highLimit": 150,
    "lowLimit": 125
  },
  {
    "date": "2023-7-13 07:00:00",
    "actual": 130,
    "highLimit": 150,
    "lowLimit": 125
  },
  {
    "date": "2023-7-14 07:00:00",
    "actual": 115,
    "highLimit": 150,
    "lowLimit": 125
  },
  {
    "date": "2023-7-15 07:00:00",
    "actual": 133,
    "highLimit": 150,
    "lowLimit": 125
  },
  {
    "date": "2023-7-16 07:00:00",
    "actual": 142,
    "highLimit": 150,
    "lowLimit": 125
  },
  {
    "date": "2023-7-17 07:00:00",
    "actual": 136,
    "highLimit": 150,
    "lowLimit": 125
  }
]

```

**Legend Property**

```python
{
 *"enabled": false,*
  "position": "bottom",
  "absolute": {
    "x": 0,
    "y": 0
  },
  "markers": {
    "enabled": true,
    "width": 20,
    "height": 20,
    "mirrorLookOfSeries": true,
    "stroke": {
      "color": "",
      "width": 1,
      "opacity": 0
    },
    "cornerRadius": {
      "topLeft": 0,
      "topRight": 0,
      "bottomLeft": 0,
      "bottomRight": 0
    },
    "icon": {
      "path": "",
      "color": "",
      "verticalCenter": "top",
      "horizontalCenter": "left",
      "width": 20,
      "height": 20
    }
  },
  "labels": {
    "text": "[bold]{name}[/]",
    "font": {
      "weight": 400,
      "size": 16,
      "color": ""
    }
  }
}

```

**XAxes 0 Property**

```python
 {
    <mark>"name": "time",</mark>
    "label": {
      "enabled": true,
      <mark>"text": "Time",</mark>
      "color": ""
    },
    "inversed": false,
    "visible": true,
    "tooltip": {
      "enabled": true,
      "text": "",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
   <mark> "render": "date",</mark>
    "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
      },
     <mark> "inputFormat": "yyyy-MM-dd kk:mm:ss",
      "format": "M/d"</mark>
    },
    "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 0 Property**

```python

{
  <mark>"name": "count",</mark>
  "label": {
    "enabled": true,
   <mark> "text": "Count",</mark>
    "color": ""
  },
  "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": "",
      "opacity": 1,
      "rotation": 0,
      "verticalCenter": "middle",
      "horizontalCenter": "middle"
    },
    "grid": {
      "color": "",
      "opacity": 1,
      "dashArray": "",
      "minDistance": null,
      "position": 0.5
    },
    "font": {
      "size": "",
      "weight": 500
    }
  }
}

```

**Series 0 Property**

```python
{
 <mark> "name": "actual",</mark>
  "label": {
    "text": "actual"
  },
  "visible": true,
  "hiddenInLegend": false,
  "defaultState": {
    "visible": true
  },
 <mark> "data": {
    "source": "example",
    "x": "time",
    "y": "actual"</mark>
  },
  <mark>"xAxis": "time",
  "yAxis": "count",</mark>
  "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
      },
      "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": ""
          }
        }
      ]
    }
  }
}

```

**Series 1 Property**

```python
{
  <mark>"name": "highLimit",</mark>
  "label": {
    "text": "Output Temp"
  },
  "visible": true,
  "hiddenInLegend": false,
  "defaultState": {
    "visible": true
  },
  <mark>"data": {
    "source": "example",
    "x": "time",
    "y": "highLimit"</mark>
  },
 <mark> "xAxis": "time",
  "yAxis": "count",</mark>
  "zIndex": 0,
  "tooltip": {
    "enabled": true,
    "text": "{name}: [bold]{valueY}[/]",
    "cornerRadius": 3,
    "pointerLength": 4,
    "background": {
      "color": "",
      "opacity": 1
    }
  },
  <mark>"render": "line",</mark>
  "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": ""
      }
    }
  },
  <mark>"line": {
    "open": {
      "x": "",
      "y": "lowLimit"</mark>
    },
    "appearance": {
      "connect": true,
      "tensionX": 1,
      "tensionY": 1,
      "minDistance": 0.5,
      "stroke": {
        "width": 3,
        "opacity": 1,
        "color": "",
        "dashArray": ""
      },
      <mark>"fill": {
        "color": "#FF8C00",
        "opacity": 0.125</mark>
      },
      "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": ""
          }
        }
      ]
    }
  }
}

```

**Series 2 Property**

```python
{
  <mark>"name": "lowLimit",</mark>
  "label": {
    "text": "Output Temp"
  },
  "visible": true,
  "hiddenInLegend": false,
  "defaultState": {
    "visible": true
  },
  "data": {
    "source": "example",
    "x": "time",
    <mark>"y": "lowLimit"</mark>
  },
  "xAxis": "time",
  "yAxis": "count",
  "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": "",
     <mark> "y": "highLimit"</mark>
    },
    "appearance": {
      "connect": true,
      "tensionX": 1,
      "tensionY": 1,
      "minDistance": 0.5,
      "fill": {
        "opacity": 0.125,
        "color": "#FF8C00"
      },
      "stroke": {
        "width": 3,
        "opacity": 1,
        "color": "",
        "dashArray": ""
      },
      "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,
      "fill": {
        "opacity": 0,
        "color": ""
      },
      "stroke": {
        "width": 3,
        "opacity": 1,
        "color": "",
        "dashArray": ""
      },
      "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": ""
          }
        }
      ]
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Zachary](https://avatars.discourse-cdn.com/v4/letter/z/90db22/32.png) [@Zachary](https://forum.inductiveautomation.com/u/Zachary)\
**Post date:** [July 1, 2024, 5:54pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-chart-target-area/92632/2 "2024-07-01T17:54:27Z")

</div>

So for anyone who saw this and is wondering what the issue was I figured it out.

_**When changing the series.(any series).data.x (which is set to t\_stamp by default) you need to set it to "date". The documentation has you set it to "time" but that is wrong!**_

The "series.0.data" section is pulling its information from "dataSource.example."  
In the JSON you copy and paste from the resource the first data point is called "date" not "time". So it doesn't know where to find that information!

Hope this helps!