A dual-axis chart refers to a data chart with data sharing an X axis and multiple Y axes at the same time. In practice, it is mostly a combination of bar charts and line charts. The product provides a variety of dual-axis chart components, allowing for flexible configuration of chart types, line styles, and arrangements.

2.1 Common usage scenarios #

In a dual-axis chart, the display of data is more intuitive. The dual-axis chart can analyze how the data of two different metrics are related in the same dimension; it is also suitable for analyzing scenarios such as the trend comparison of different data and the comparison of the same month.
For example, if you want to view "price" and "order count" on the same chart, often because the huge gap between the values cannot well reflect the distinction of the data, a dual-axis chart can solve the difference in the order of different metrics, the left axis measures [order count], and the right axis measures [price].
Dual-axis chart example

2.2 Example of usage process #

Step 1: click to select or drag in Dimensions, Metrics, Secondary Metrics, and select Filter conditions.

Step 2: click the dual-axis chart icon, the system will draw a dual-axis chart by default, Y-axis-main axis is a bar graph, Y-axis-secondary axis is a line graph.

Step 3: modify the chart format as needed.

3.1 Dual-axis chart icon #

3.2 Configuration rules #

• Dimension: Supports N dimensions. The first dimension is the X-axis dimension; the subsequent dimensions are the color dimensions.
• Metric: Y left axis can support multiple metrics.
• Secondary metric axis: Y right axis, which can support multiple metrics, and the fields of metrics and secondary metric axis can be swapped.
  

3.3 Editing Colors #

You can set the corresponding color for the dual-axis chart, and the product has a variety of built-in color schemes.

Custom Color Schemes is also supported.

3.4 Types of charts #

Both the primary and secondary axes of the dual-axis chart offer four chart types, which can be toggled at [Chart Type].

• The main axis is a stacked bar chart, and the secondary axis is a line chart.
  
• The main axis is a line chart, and the secondary axis is an area chart.
  

3.5 Line style #

• Line type: you can choose polyline, smooth, thick and thin lines, as well as solid lines, dotted lines, dotted lines;
• Mark: You can choose no marking point, hollow circle, solid circle, square, rhombus, and choose the size of the marking. At the same time, it supports the selection of "follow line width" and "custom":
  • Follow line width: the diameter of the marking point is consistent with the line width. When adjusting the line width, the diameter of the marking point changes synchronously.
  • Customization: Manually set the diameter of the marker point, support the input of values greater than 0 (including decimals), the unit is px.
    

3.6 Arrangement #

You can check whether to turn on metric overlap.

• Yes, as shown below:
  
• No, as shown below:
  

3.7 X-axis #

• X-axis: Click the switch button on the right side of the X-axis to select to display or not to display X-axis information;
• Axis name check box: you can check or uncheck, you can modify the name after checking, the default is the name of the field;
• Axis name (gray): can set the text size, text color;
• Axis label: can set the text size, text size, text tilt angle (0-360 degrees);
• Axis: the color of the axis can be set;
• **Thumbnail: **Can be used to scale charts horizontally or vertically.

  warning

  After selecting the following data range, the thumbnail axis does not support opening.

  

3.8 Y axis - main axis/secondary axis #

• Y-axis-main/secondary axis: Click the switch button on the right side of Y-axis-main/secondary axis to select to display or not to display Y-axis-main information;
• Axis name: you can check or uncheck, you can modify the name after checking, the default is the name of the field;
• Number line range: automatic, automatic(excluding 0), specified range and following data range:
  • Automatic: (negative, 0, positive), including 0;
  • Automatic: excluding 0;
  • Specify the range: You can manually enter the minimum and maximum values, and the right value of the input should be greater than the left value and cannot be empty;
  • Follow the data range: The Y-axis range is automatically matched according to the actual minimum and maximum values of the current data. When the user performs analysis operations such as filtering and linkage, resulting in changes in the data range, the Y-axis scale will be updated adaptively, always using the minimum and maximum values within the latest data range as the upper and lower boundaries of the coordinate axis.
    
• Data format: Click to set the label data format of the number axis in the pop-up window. Can be set as number, percentage, thousand percent, original value;
  
• Custom interval (only the Y-axis has this setting): Set the distribution of the Y-axis scale:
  • Automatic: The system automatically calculates and distributes scales according to the default logic, which is suitable for historical chart compatible scenarios.
  • Equal interval: Fill in the text box with positive integers, and the system will evenly distribute the scale according to the specified interval number within the current data range. For example, if the data range is 0.08 to 0.12 and the aliquot interval is filled in as 2, the Y axis will be plotted at 0.08, 0.10, and 0.12.
• Number axis ratio: control the scale display ratio of the number axis, which is generally linear, and can also be processed by logarithm, such as log(base 2), which is to take the logarithm to base 2, which is generally suitable for the operation and maintenance monitoring scenarios where the value difference between the two metrics of the same axis is too large;

  warning

  When the number axis range is "follow the data range", adjusting the number axis scale is not supported.

• Number axis format: refers to the label data format of the number axis is set. Can be set as number, percentage, thousand percent, original value;
• Axis name (gray): can set the text size, text color;
• Axis label: can set the text size, text size, text tilt angle (0-360 degrees);
• Axis: The color of the axis can be set.

3.9 Grid lines #

See 3.6 Grid lines.

3.10 Special value #

See 3.7 Special values.

3.11 Legends and labels #

Legend:

• You can click the switch button on the right to choose to display or not to display the legend information;
• You can set the display position of the legend in the chart, above, below, left, and right.
• You can set the alignment of the legend: top/left alignment, center alignment, bottom/right alignment.
• You can set the maximum number of columns, font, and color for the legend.
• You can set the way to display the legend. When there are too many legends, you can choose two display effects: page flipper or scroll bar.

Label:
Basic configuration can be seen 3.8 Legends and labels
The dual-axis chart supports displaying labels as percentages. Click the Set button next to the percentage to set the number of decimal places and the prefix.

3.12 Reminder information #

See 3.9 Tooltip information.

3.13 Display Mode #

See 3.10 Display mode.

3.14 In-Figure Control Styles #

See In-chart control style.

3.15 Restore default settings #

Click [Restore Default Settings], and the content in the above chart configuration will be restored to default.

3.16 Perspective #

See Pivot Chart.