---
title: "XY Chart Example - Line Chart Target Area"
---

# 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.

![](image-2023-7-27_7-9-12.png)

Although, there are many ways to enter data values and high/low limit values for a line chart, the data used in this example is shown in the code block below. Copy the JSON content below and paste it onto the Chart component's **dataSources.example** property. 

```
[
  {
    "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
  }
]
```

Before creating a target zone, we must first adjust some of the default XY Chart settings to display the **actual** values from our example data source on the line chart: 

1. Remove the legend by setting **legend.enabled** to false. 
2. Navigate to the xAxis property to set the **xAxis.0.name** and **xAxis.0.label.text** properties. In this example, the name will be **time** and the label.text property will be set to **Time**.
3. Make sure the **xAxes.0.render** property is set to **date** and set your **xAxes.0.date** format if needed. This example uses **date** for the **xAxes.0.date.inputFormat** and **xAxes.0.date.format** properties.
4. Navigate to the **yAxes** property and delete the **yAxes.1** array that is loaded by default. 
5. Then, set the **yAxes.0.name** and **label.text** properties. In this example, the name will be **count** and the label.text property will be set to **Count**. 
6. Now, set the following **series.0** properties to display the **actual** values:
    * **name**: actual
    * **data.source**: example
    * **data.x**: date
    * **data.y**: actual
    * **xAxis**: time
    * **yAxis**: count

    ![](image-2023-7-27_7-43-27.png)

Now, you'll see a line chart that displays the actual values. However, there is still no clear way to tell if these values are good or bad. This will be achieved by creating two more series using the high and low limit data already built into our data source. 

1. Create a new series and set the following **series.1** properties to display the acceptable high limit area. 
    * **name**: highLimit
    * **data.source**: example
    * **data.x**: date
    * **data.y**: highLimit
    * **xAxis**: time
    * **yAxis**: count
    * **render**: line
    * **line.open.y**: lowLimit
    * **line.appearance.fill.color**: #FF8C00
    * **line.appearance.fill.opacity**: 0.125

2. Duplicate series.1 and change the following **series.2** properties to display the acceptable low limit area. 
    * **name**: lowLimit
    * **data.y**: lowLimit
    * **line.open.y**: highLimit

    ![](image-2023-7-27_7-52-32.png)

With the high and low limit areas displayed, it is now easy for any user to see that all counts were within the acceptable range, except for on 7/14/2023.