A combination chart uses two axes to display data with different magnitudes. It can combine line, bar, and area charts in a single coordinate system. It also supports complex scenarios, such as stacked and 100% stacked charts. For example, you can use it to show change trends between different projects. This topic describes how to add data to a combination chart and configure its styles.
Prerequisites
A dashboard is created. For more information, see Create a dashboard.
Overview
Scenarios
Trend widgets display continuous data over time (based on common scale settings) and are ideal for visualizing trends at equal time intervals.
In an area chart, you can see how data changes over time, such as whether the data increases, decreases, shows periodic changes, or grows exponentially.
Benefits
Calculation capabilities: You can use one-click configuration for period-over-period and cumulative calculations, and add smart auxiliary lines and trend lines.
Visualization effects: Supports line, area, stacked area, and 100% stacked area charts. You can configure settings for items such as labels, legends, and an overview axis.
Data comparison and annotation: Allows you to compare data from the same period and annotate values.
Example
Limits
A combination chart consists of a Primary Value Axis/Measure, a Secondary Value Axis/Measure, a Category Axis/Dimension, and a Color Legend/Dimension.
The primary and secondary value axes are determined by data measures. You must select at least one measure, such as Order amount and Profit amount.
The category axis is determined by data dimensions. You must select at least one dimension, such as Order Date (Year).
The color legend is determined by data dimensions. You can select a maximum of one dimension, such as Shipping Method.
NoteYou can enable the color legend only when a single measure field is selected for the primary or secondary value axis.
Configure Chart Data
On the Data tab, select the required dimension and measure fields.
In the Measures list, find Order amount and double-click it or drag it to the Primary Value Axis/Measure area.
In the Measures list, find Profit amount and double-click it or drag it to the Secondary Value Axis/Measure area.
In the Dimensions list, find Order Date (Year) and double-click it or drag it to the Category Axis/Dimension area.
Click Update. The system automatically updates the chart.
(Optional) To view data for only specific cities, you can set a filter to select the required data.
Auto-refresh
After you enable this option, the system automatically refreshes the chart data. For example, if you enable this option, set the duration to 5 and the unit to Minute, the system refreshes the chart every 5 minutes.
Configure Chart Styles
On the Fields tab of the Chart Design pane, you can change the chart style.
In this example, set the display mode for Profit amount on the Secondary Value Axis/Measure to Line.
You can also hover over Standard to change the stacking mode of the chart.
The following sections describe the style settings for the chart. For information about general style settings, see Configure the Chart Title.
In the search box at the top of the configuration section, you can enter a keyword to quickly find a configuration item. You can also click the 
icon on the right to expand or collapse all categories.
Drawing Area
In the Drawing Area section, you can configure the combination chart style.
Chart configuration item | Configuration Item Description |
Color Settings | You can set the color scheme for the combination chart. |
Chart Display Direction | You can set the chart display direction to Horizontal or Vertical. |
Chart Alignment | When the chart display direction is Vertical, you can set the chart alignment to Align Left or Align Right.
|
Lines | You can configure the line style. You can set the line type to Curve or Straight, configure the line style and thickness, and choose whether to show markers and their style. You can also configure how to handle null values.
|
Column | You can set the width of the bars.
|
Default Selection on Mobile | After you enable this option, you can set Default Selection to Last dimension value of all series or Last dimension value of a specified series. |
Axes
In the Axes section, you can configure the axis styles. By default, the axes are displayed.
You can select Show Secondary Y-axis. The secondary Y-axis takes effect only when two or more measures are added. If you select this option, a Right Y-axis section appears in the Axes area.
Name | Configuration item | Description |
X-axis | Show X-axis | Specifies whether to show the x-axis. |
Show Title and Unit | Specifies whether to show the axis title and unit on the x-axis. | |
Show Axis Labels | Specifies whether to show labels on the x-axis, and configures the label display rule and text style. | |
Content to Display | Sets the content to display to some or all dimensions.
| |
Show Tick Marks | Specifies whether to show tick marks on the x-axis. | |
Show Axes | Specifies whether to show the x-axis line, including its line style, width, and color. | |
Show Gridlines | Specifies whether to show gridlines for the x-axis, including their line style, width, and color. | |
Left Y-axis | Flip Y-axis Scale | You can flip the Y-axis scale values.
|
Show Left Y-axis | Specifies whether to show the left y-axis. | |
Show Title and Unit | Specifies whether to show the axis title and unit. | |
Show Axis Labels | Specifies whether to show labels on the left y-axis and sets the axis label display format. | |
Show Tick Marks | Specifies whether to show tick marks on the left y-axis. | |
Show Axis Line | Specifies whether to show the left y-axis line, including its line style, width, and color. | |
Show Gridlines | Specifies whether to show gridlines for the left y-axis, including their line style, width, and color. | |
Axis Value Range and Interval |
|
You need to configure the Right Y-axis only when Show Secondary Y-axis is selected. The parameter settings are the same as those for the Left Y-axis.
Legend
In the Legend section, click the 
icon to enable the chart legend and configure its style.
PC configuration
Chart configuration item
Description
Position
Sets the display position and alignment of the legend on a PC.
If the position is Top or Bottom, you can select left, center, or right alignment.
If the position is Left or Right, you can select top, center, or bottom alignment. You can also set the distance between the legend and the chart content.
Text
Sets the text style of the legend on a PC. You can set the font color, size, weight, and style (italic).
Mobile configuration
Configuration Item
Description
Position
Sets the display position and alignment of the legend on a mobile device.
If the position is Top or Bottom, you can select left, center, or right alignment.
If the position is Left or Right, you can select top, center, or bottom alignment. You can also set the distance between the legend and the chart.
NoteWhen the position is Top, you can enable labels under the legend. If you enable this option, custom alignment is not supported.
Text
Sets the text style of the measure names in the legend on a mobile device. You can set the font color, size, weight, and style (italic).
Display Label Content
When Position is set to Top, click the
icon to enable labels under the legend.Style
Sets the layout of the labels under the legend. The following options are available.
Multi-line equal distribution: Automatically arranges labels in equal divisions based on the number of columns specified for Max columns per row and the number of rows specified for Max rows per page.
Single-line tile: All label content is displayed in a single line.
Plain text: Displays only text content without icons. The text color matches the color of the corresponding measure's line in the chart.
When not selected, display metric as
When Style is set to Multi-line equal distribution or Single-line tile, you can configure how to display the metric for an unselected legend item. You can choose to display "-" or leave it empty.
Text Style
When Style is set to Multi-line equal distribution or Single-line tile, you can configure the style of the value text.
Display Full Text
When Style is set to Multi-line equal distribution or Single-line tile, long measure names may be truncated. To display the full measure name, select Display Full Text.
Show Tooltip Fields
If you select this option, the fields that you configure in Tooltip/Measure on the Fields pane are displayed in the legend area.
NoteTooltip fields cannot be displayed when data is split by a dimension value (that is, when Color Legend is a dimension).
Data Labels
In the Data Labels section, you can configure whether to show data labels and their styles.
Chart configuration item | Configuration Item Description |
Display All | Specifies whether to display all data labels. |
Text | Sets the label text style. |
Tooltip
In the Tooltip section, click the icon to enable tooltips and configure their style.
PC configuration
Chart configuration item
Description
Display Mode
Sets the tooltip display mode. You can choose By single data point or By dimension value.
Content
Selects the data content to display in the tooltip. The available content varies based on the configuration.
When the display mode is By single data point, Percentage is supported. When the display mode is By dimension value, Total and Percentage are supported.
Percentage: The percentage of a single data point relative to the total within the current dimension. For example, the percentage of profit amount in total revenue for office supplies.
Total: The sum of all measures within the current dimension. For example, the total sales amount for all regions in 2025.
NoteWhen a field is dragged to Secondary Value Axis/Measure, you can set the content for the left and right Y-axes separately.
Background Color
Sets the background fill color of the tooltip box.
Text
Sets the style of the text in the tooltip box. You can set the font color, size, weight, and style (italic).
Mobile configuration
Chart configuration item
Description
Floating Bubble
Click the
icon to enable the floating bubble display (①).Content
Sets the data content to display in the floating bubble. You can select Percentage or Total.
NoteWhen a field is dragged to Secondary Value Axis/Measure, you can set the content for the left and right Y-axes separately.
Percentage: The percentage of a single data point relative to the total within the current dimension. For example, the percentage of profit amount in total revenue for office supplies.
Total: The sum of all measures within the current dimension. For example, the total sales amount for all regions in 2025.
Background Color
Sets the background fill color of the floating bubble.
Text
Sets the text style in the floating bubble. You can set the font color, size, weight, and style (italic).
Display Axis Dimension
Click the
icon to enable the axis dimension display (②).Background Color
Sets the background fill color of the axis dimension label.
Text
Sets the text style of the axis dimension label. You can set the font color, weight, and style (italic).
Series Settings
In the Series Settings section, you can configure the series styles.
You need to configure the alias and value display format in Series Settings only when Color Legend/Dimension is enabled on the Fields tab.
Chart configuration item | Configuration Item Description |
Select Series Field | Select a dimension or measure item as needed. |
Alias | Set a field name that fits your business scenario. This item can be configured only when Color Legend/Dimension is configured. |
Line Style | Sets the line style and thickness of the lines in the chart. Note This feature is not supported for stacked and 100% stacked charts. |
Show Markers | Specifies whether to show markers on the lines in the chart. You can set the markers to circle, hollow circle, diamond, or hollow diamond. Note This feature is not supported for stacked and 100% stacked charts. |
Show Data Labels | Select whether to show data labels, and set the label color and position. |
Value Display Format Settings | If you choose to show data labels, you can configure the display format of the values in the labels. You can choose from auto-fit, custom, and manual formats. This item can be configured only when Color Legend/Dimension is configured. |
Show Max/Min Values | Displays the labels for the maximum and minimum values in the combination chart. Note This feature is not supported for stacked and 100% stacked charts. |
Auxiliary Display
When the data on a chart axis is too dense to be fully displayed within the current container size, you can click the icon to enable chart view controls. This allows report viewers to dynamically adjust the visible range of the chart using a slider, providing a flexible user experience while ensuring data integrity and readability.
You can control the visible range on the chart axis using the following two control types: Overview axis and Scroll bar.
Chart configuration item | Description |
Overview axis | When you select Overview axis, a simplified trend chart of the full data (the overview axis) is displayed at the bottom of the chart. Report viewers can drag the selection area to quickly browse all data or focus on data within a specific range. The overview axis uses absolute coordinates, meaning the selected interval on the overview axis corresponds directly to a fixed number of data items on the actual axis. This is suitable for comparison analysis or complex scenarios that require direct positioning. |
Scroll bar | When you select Scroll bar, a horizontal scroll bar is displayed at the bottom of the chart. Report viewers can drag the slider horizontally to move the view window left or right. The scroll bar uses a relative ratio, meaning the slider's length and position are determined by the ratio of the visible window to the total data range. This is suitable for general browsing scenarios. After setting the minimum category width, the scroll bar will appear if the actual category width allocated to the chart is less than this value. When the scroll bar is enabled, chart elements and data labels are constrained within the rectangular area of the coordinate system. Any parts that extend beyond this area (such as markers and data labels) are automatically truncated or repositioned to fit. |
By default, the overview axis is displayed only when the data volume exceeds the display width of the chart container. To always display the overview axis, select Always show. The overview axis will then be visible even if the chart data does not fill the screen.
You can also set the minimum category width for the scroll bar to limit the amount of data in the current chart window. This ensures that the chart content is clearly scaled within the visible area and avoids visual clutter from overlapping data labels or overly dense data points. The default minimum category width is 32 px, with a range of 16-100 px.If no visual controls are configured for the chart and the chart size is too small, the system automatically enables the Overview axis. The overview axis is displayed only when the data volume exceeds the display width of the chart container.
Configure Chart Analytics
Configuration item | Name | Description |
Interactive Analysis | Drilling | When you configure the drilling feature for a chart, you can configure the display style of the drill-down level rows. For more information, see Drilling. |
Filter Interaction | If the data you want to analyze exists in different charts, you can use filter interaction to associate multiple charts for data analysis. For more information, see Filter Interaction. | |
Jump | If the data you want to analyze exists in multiple dashboards, you can use dashboard jumps to associate multiple dashboards for data analysis. Jumps include Parameter Jump and External Link. For more information, see Jump. | |
Analysis and Alerting | Auxiliary Line | Use an auxiliary line to see the difference between the current measure value and the value set for the auxiliary line. The auxiliary line value can be a static field or a calculated value. Calculated values include average value, maximum, minimum, and median. For more information, see Analysis and Alerting. |
Trend Line | Use a trend line to show the overall development trend of the current data. Trend lines include Artificial Intelligence Recommendation, Linear, Logarithmic, Exponential, Polynomial, and Power Function. For more information, see Trend Line. | |
Annotation | - | When data in a chart is abnormal or requires special attention, you can use color highlights, icons, comments, or data points to annotate it. This helps you identify anomalies and take appropriate action. For more information, see Annotation. |
What to do next
To allow others to view the dashboard, you can share it with specific users. For more information, see Publish a dashboard.
To create a complex dashboard with a navigation menu for thematic analysis, you can integrate the dashboard into a BI portal. For more information, see BI portal.