Multi Series Chart
Description:
Multi Series Chart
Multi Series Chart component used to plot data for multiple datasets. For example, you can plot the revenue collected each month for the last two years using a multi-series chart. Multi-series charts allow to plot the highs and lows of multiple datasets while also comparing them.
Allowed Parent Components:
Card Body
Col
Horizontal Section
Vertical Section
Allowed Child Components:
Popover
Pulse
Trigger Before Render
Trigger On Click
Properties
➤ 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
➤ Type
Select a chart type to be rendered.
Allowed Values:
msbar2d
msBar3D
mscolumn2d
msColumn3D
msarea
msline
stackedcolumn2d
stackedcolumn3d
stackedarea2d
stackedbar2d
stackedbar3d
marimekko
➤ Height
Provide numerical values to set heigth in pixels.
Allowed Values: Any number value
➤ Place Values Inside
Enable this to display values inside of the chart symbols.
Allowed Values: Yes/No
➤ Rotate Values
Enable this to rotate the data 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 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
➤ Show Sum
Enable this to show the sum of all stacked data plots in a column above that column.
Allowed Values: Yes/No
➤ Stack100 Percent
Enable this to show the percentage distribution for individual items of a dataset. These stacked charts are called 100% Stacked Charts. The y-axis, instead of representing the actual data values, represents the percentage values.
Allowed Values: Yes/No
➤ Show Percent In Tooltip
Enable to show the percentage values in tool-tips.
Allowed Values: Yes/No
➤ Use3 Dlighting
Enable this to appear 3DLightegning effect for the chart.
Allowed Values: Yes/No
➤ Width
Provide numerical values to set width in pixels.
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:
auto
wrap
stagger
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
➤ 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.
➤ Value Attribute
Selected attribute value will be plotted on the chart.
Allowed Values: Selected attribute value will be plotted on the chart.
➤ Function
Select a function to do arithmetic operations on data.
Allowed Values:
SUM
COUNT
AVG
MAX
MIN
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
Last updated