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

1. Card Body
2. Col
3. Horizontal Section
4. Vertical Section

### Allowed Child Components:

1. Popover
2. Pulse
3. Trigger Before Render
4. 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:

1. msbar2d
2. msBar3D
3. mscolumn2d
4. msColumn3D
5. msarea
6. msline
7. stackedcolumn2d
8. stackedcolumn3d
9. stackedarea2d
10. stackedbar2d
11. stackedbar3d
12. 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:

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

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

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/multiserieschart.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.