# 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


---

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