# XY Chart

## Description:

XY Chart

Provides a graphical representation of data, in which the data is represented by lines along X-axis and Y-axis.

### Allowed Parent Components:

1. Card Body
2. Col
3. Grid Child
4. Horizontal Section
5. Vertical Section

### Allowed Child Components:

1. Popover
2. Pulse
3. Trigger Before Render
4. Trigger On Click

### Properties

### ➤ Type

Bubble Chart uses bubble-like symbols to depict data on the Plot Area. Scatter chart is used to plot co-relations between two variables for a set of dataPoints. Zoomscatter is an extension of the scatter chart with the zooming and panning features.

Allowed Values:

1. bubble
2. scatter
3. zoomscatter

### ➤ Caption

Provide a title for the Chart.

Allowed Values: An expression which should return string after evaluation

### ➤ Sub Caption

Provide a sub title for the chart.

Allowed Values: An expression which should return string after evaluation

### ➤ Enable Smart Labels

By default smart labels manage overlapping of labels even when a large number of labels are placed in the close vicinity. Uncheck to disable these smart labels.

Allowed Values: Yes/No

### ➤ Height

Provide a number to set height for the chart.

Allowed Values: Any number value

### ➤ Place Values Inside

Enable this to display values inside of the chart symbols.

Allowed Values: Yes/No

### ➤ Show Labels

Enable this to display labels of the chart.

Allowed Values: Yes/No

### ➤ Show Legend

Enable this to display legend properties for the chart.

Allowed Values: Yes/No

### ➤ Show Legend On Right

Enable this to display legend properties properties on right side of the chart

Allowed Values: Yes/No

### ➤ Show Shadow

Enabel this to display shadow for the chart.

Allowed Values: Yes/No

### ➤ Show Values

Enable this to display values if any for the category fields.

Allowed Values: Yes/No

### ➤ Show Xaxis Line

Enable this to display a line along X-axis

Allowed Values: Yes/No

### ➤ Show Yaxis Line

Enable this to display a line along Y-axis

Allowed Values: Yes/No

### ➤ Use3 Dlighting

Enable this to appear 3DLightegning effect for the chart.

Allowed Values: Yes/No

### ➤ Width

Provide a number to set width of the chart

Allowed Values: Any number value

### ➤ X Axis Name

Provide a name that you would want to display on the X-axis.

Allowed Values: Free text field

### ➤ Y Axis Name

Provide a name that you would want to display on the Y-axis.

Allowed Values: Free text field

### ➤ Label Display

Select the way you want your label to display.

Allowed Values:

1. auto
2. wrap
3. stagger
4. rotate

### ➤ Slant Labels

Enable this to display labels in slant manner

Allowed Values: Yes/No

### ➤ Stagger Lines

Enter a numeric value above 2 to control how many lines to stagger the label to. By default, all labels are displayed in a single line.

Allowed Values: Any number value

### ➤ Label Step

Value to display every n-th label, instead of all labels on the x-axis

Allowed Values: Any number value

### ➤ Palette Colors

Specify your custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., "paletteColors": "#FF0000, #0372AB, #FF5904...". The chart will cycle through the list of specified colors and then render the data plot accordingly.

Allowed Values: Free text field

### ➤ Export Enabled

Enable this to allow export in png, jpg, pdf, svg or xls formats.

Allowed Values: Yes/No

### ➤ Export File Name

Specify the name (excluding the extension) of the output (export) file. default: chart

Allowed Values: Free text field

### ➤ Anchor Radius

This attribute sets the radius (in pixels) of the anchor.

Allowed Values: Any number value

### ➤ Anchor Border Thickness

Helps you set border thickness of anchors.

Allowed Values: Any number value

### ➤ On Click

Allowed Values: Controller Function

### ➤ Use Existing Data Source

Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.

Allowed Values: Yes/No

### ➤ Data Source

Select a datasource from the list.

Allowed Values: Select a datasource from the list.

### ➤ Data Source Alias

Allowed Values: Free text field

### ➤ Default Where Clause

Allowed Values: Free text field

### ➤ Max Rows

Allowed Values: Any number value

### ➤ Order By Clause

e.g. #firstAttr#, #secondAttr# DESC

Allowed Values: Free text field

### ➤ Auto Query

Check this property to query the selected datasource on component render.

Allowed Values: Yes/No

### ➤ Execute Count SQL

Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}

Allowed Values: Yes/No

### ➤ Execute Distinct SQL

Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.

Allowed Values: Yes/No

### ➤ Key Attribute

It is the primary key field in the current data source.

Allowed Values: It is the primary key field in the current data source.

### ➤ Label Attribute

The attribute that you would want to display as the label on the X- axis

Allowed Values: The attribute that you would want to display as the label on the X- axis

### ➤ Category Key Attribute

Select a attribute so that the mathematical functions will be performed on this attribute.

Allowed Values: Select a attribute so that the mathematical functions will be performed on this attribute.

### ➤ Category Attribute

To display all the categories based on the attribute that you provide in a legend at the bottom.

Allowed Values: To display all the categories based on the attribute that you provide in a legend at the bottom.

### ➤ X Axis Value Attribute

It is a column through which you can get the data from DataSource to display along X-axis.

Allowed Values: It is a column through which you can get the data from DataSource to display along X-axis.

### ➤ Y Axis Value Attribute

It is a column through which you can get the data from DataSource to display along Y-axis.

Allowed Values: It is a column through which you can get the data from DataSource to display along Y-axis.

### ➤ Z Axis Value Attribute

It is a column through which you can get the data from DataSource to display along Z-axis.

Allowed Values: It is a column through which you can get the data from DataSource to display along Z-axis.

### ➤ Function

Select a function to do arithmetic operations on data.

Allowed Values:

1. SUM
2. COUNT
3. AVG
4. MAX
5. MIN

### ➤ Auto Refresh Interval

Specify this property in seconds to refresh the component to specified interval.

Allowed Values: Any number value

### ➤ Label Format Expression

Specify an expression that should be evaluated to a string

Allowed Values: An expression which should return string after evaluation


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloudio.io/ui-components/widgets/xychart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.