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

PreviousChartNextCheckBox

Last updated