# 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