---
title: "Report Component - XY Chart"
description: "The XY Chart, while similar to the Timeseries Chart, uses a numerical value for the Domain Axis instead of a Datetime. The XY chart is ideal when trying to detail the relationship between two keys."
---

# Report Component - XY Chart

> The XY Chart, while similar to the Timeseries Chart, uses a numerical value for the Domain Axis instead of a Datetime. The XY chart is ideal when trying to detail the relationship between two keys.

The XY Chart, while similar to the [Timeseries Chart](appendix\components\report-design-components\report-design-chart-palette\report-component-timeseries-chart\report-component-timeseries-chart.md), uses a numerical value for the Domain Axis instead of a Datetime. The XY chart is ideal when trying to detail the relationship between two keys.

![](xychart-initial.png)

**Report Design Component Palette Icon**

![" "](xyChartIcon.png)

## Properties

### Property Inspector - Chart Options

![" "](xyChartOptions.png)

|Property|Description|
|---|---|
|Data Key|Unique identifier or placeholder to the data source that will populate the chart.|
|Domain Key|The data key that should represent the X axis on the chart. The Timeseries Chart expects a timestamp, while the XY chart can use any numeric value as the domain key.|
|Pens|Pens represent a series of data. There are several properties for each pen exposed on the Chart Options tab:Range Key: The key the pen should retrieve data from.Pen Name: The name of the pen that should appear on the chart.Preview: Visual representation of how the pen will be rendered. The trend is simply a preview, and does not take the data from the range key into account.|
|Add Pen ![" "](add.png)|Adds a pen.|
|Edit Pen ![" "](edit.png)|Opens Pen Configuration area for editing.|
|Remove Pen ![" "](delete.png)|Deletes a pen.|
|Axes|There are several properties for each axis exposed on the Chart Options tab:Name: The name of the axis.Label: Text next to the axis. Commonly used to describe what the values of each pen represent.Auto?: Determines if the axis should automatically adjust the upper and lower bound of the axis to include all data from each pen. When enabled, the High and Low properties are ignored. When disabled, High and Low will be used.Low: The low range value the axis will use when 'Auto?' is disabled.High: The high range value the axis will use when 'Auto?' is disabled.|
|Add Axis ![" "](add.png)|Add an axis.|
|Edit Axis ![" "](edit.png)|Opens Axis Configuration area for editing.|
|Remove Axis ![" "](delete.png)|Deletes an axis.|
|Scripting Enabled|Enables the script for this component to run.|
|Edit Script ![](edit.png)|Allows the chart to be modified before the report is rendered via Python script.|

### Properties Inspector - Properties Tab

![" "](xyChartPropTab.png)

|Property|Description|
|---|---|
|Data Key|Data key of the dataset that drives this chart.|
|Axis Label Font|Font to use for axis labels.|
|Axis Tick Font|Font to use for axis tick marks.|
|Bar Width|The width of any bar datapoints.|
|Domain Key|Key name of the column inside the dataset that contains the domain (x) value.|
|Gap Threshold|Multiplier for the average space between data points to be considered a data gap for the "line with gaps" render style.|
|No Data Msg|Message to show when no data is available.|
|Plot Background|Color to use for chart background. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|
|Show Legend|If true, show a legend for the chart.|
|Auto Range|If true, automatically determine range of X-axis.|
|Axis High|If autorange is turned off, the high value to use for the axis.|
|Axis Low|If autorange is turned off, the low value to use for the axis.|
|Margin|Margin for the x-axis edges.|
|Number Format|A optional number format string to override the automatic formatting on the x-axis.|
|Show X-Axis|If true, show the x-axis.|
|X-Axis Label|Label text for the x-axis.|
|Opacity|How opaque the fill color is, between 0 and 1.|
|Stroke Style|What style of stroke or border to use: Hidden, Shape Outline, Border, or Double. To learn more about stroke styles, refer to [Stroke and Fill Properties](ignition-modules\reporting\report-design\stroke-and-fill-properties-for-reports\stroke-and-fill-properties-for-reports.md).|
|Stroke|[Details for the chosen stroke](ignition-modules\reporting\report-design\stroke-and-fill-properties-for-reports\stroke-and-fill-properties-for-reports.md). Each Stroke has its own properties depending on the Stroke Style chosen.|
|Roll|Number of degrees this shape is rotated clockwise.
|Scale X|Amount to scale the width of this shape. 1 is scale to 100%.|
|Scale Y|Amount to scale the height of this shape. 1 is scale to 100%.|
|URL| A link to attach to this reporting component. Will be a clickable hyperlink if the report is exported as a PDF. You can use the values below to link to internal pages.Page:Next - Navigates to the next page.Page:Back - Navigates to the previous page.Page:Number - Replace "Number" with a numeral. Navigates to the specified page.|
|Visible|If true, the shape will be visible.|
|Width|Width of this shape in pixels.|
|Height|Height of this shape in pixels.|
|X|Horizontal distance in pixels between the left edge of this shape and the left edge of the page.|
|Y|Vertical distance in pixels between the upper edge of this shape and the top edge of the page.|

## Example

![](xyChartPreview.png)

```python title="XY Chart Sample CSV Data - uncanny_valley"
Familiarity, Human_Similarity
0, 0
22, 24
28, 33
42, 43
65, 60
0, 72
-20, 80
50, 90
90, 95
```

![" "](xyChartOptionsExample.png)