# Chart

## Description:

Bar Chart

Provides a graphical representation of data, in which the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart. A chart can represent tabular numeric data, functions or some kinds of qualitative structure and provides different info.

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

Select a type of chart you want to render.

Allowed Values:

1. area2d
2. bar2d
3. bar3d
4. column2d
5. column3d
6. doughnut2d
7. doughnut3d
8. line
9. pie2d
10. pie3d

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

### ➤ Default Center Label

Provide an expression for the text to be displayed in the center. Use #{total} to insert the sum of all pie values.

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 of the chart.

Allowed Values: Any number value

### ➤ Place Values Inside

Enable this to place values inside the symbols of the chart.

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 for the chart.

Allowed Values: Yes/No

### ➤ Legend Position

Select the position to align legend.

Allowed Values:

1. {"value":"BOTTOM","label":"Bottom"}
2. {"value":"RIGHT","label":"Right"}

### ➤ 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 Percent Values

Enable this to show percentage values in labels of the chart.

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

### ➤ Rotate Values

Enable this to rotate the data of the chart.

Allowed Values: Yes/No

### ➤ Use3 Dlighting

Enable this to appear 3DLightegning effect for the chart.

Allowed Values: Yes/No

### ➤ Width

Provide width for 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 an expression which evaluates to 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: An expression which should return string after evaluation

### ➤ Dark Back Ground

Enable this to display all the labels in lite color when the chart background color is dark.

Allowed Values: Yes/No

### ➤ Export Enabled

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

Allowed Values: Yes/No

### ➤ Y Axis Max Value

Value to set max value for y axis.

Allowed Values: Any number value

### ➤ Export File Name

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

Allowed Values: Free text field

### ➤ Hide No Data Placeholder

Check this to hide the data displayed when no data found.

Allowed Values: Yes/No

### ➤ No Data Icon

Select an icon to display when no data found.

Allowed Values: Icon List

### ➤ No Data Text1

Provide a text to display as title when no data found.

Allowed Values: Free text field

### ➤ No Data Text2

Provide a text to display as sub title when no data found.

Allowed Values: Free text field

### ➤ Plot Tool Text

You can either specify a constant string as the tooltip text or you can use variable values from the data level by prefixing a $ to the attribute name.Ex:$label : $dataValue

Allowed Values: Free text field

### ➤ Pie Radius

Specify the outer radius of the pie/doughnut chart using this property.You can specify the value in both percentage and pixel values.

Allowed Values: Free text field

### ➤ Doughnut Radius

Specify the inner radius of the doughnut chart using this property.You can specify the value in both percentage and pixel values.

Allowed Values: Free text field

### ➤ Center Label Font Size

Provide a number to set size of the center label.

Allowed Values: Any number value

### ➤ Label Font Size

Provide a number to set size of the label.

Allowed Values: Any number value

### ➤ Label Position

Place the label inside the slices by setting the value of this property to inside.

Allowed Values:

1. inside
2. outside

### ➤ Value Position

Place the value inside the slices by setting the value of this property to inside.

Allowed Values:

1. inside
2. outside

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

### ➤ Value Attribute

It is a column through which you can get the data from DataSource.

Allowed Values: It is a column through which you can get the data from DataSource.

### ➤ Function

Select a function to do arithmetic operations on data.

Allowed Values:

1. SUM
2. COUNT
3. AVG
4. MAX
5. MIN
6. COUNT(DISTINCT)

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