Published at: 2025-10-30
Butterfly Diagram
Butterfly Chart
1.1 Application Scenarios
The butterfly chart allows for the comparison of distribution differences between two related metrics under the same dimension, such as comparing the distribution differences between high-value and low-value Accounts in different industries.

1.2 Chart Configuration
1.2.1 Axis Data
- Dimension: 1 dimension
- Metrics: 2 metrics

1.2.2 Style (Web)
1.2.2.1 Basic Info
- Chart Name: By default, it is the analysis Subject name when created, but it can be customized based on chart configuration.
- Remarks:
- Remark Content: You can set remark information based on the current chart to help viewers better understand the content expressed by the chart.
- Remark Style:
- Collapsed: Displayed as an icon after the title in both detail and card views. Hovering over the icon shows the remark content.
- Exposed: Directly displayed as text after the title in both detail and card views.
- Not Displayed: Not shown in either detail or card views.
- Metric Name: By default, displayed according to the metric name, but can be modified.
- Dimension Name: By default, displayed according to the dimension name, but can be modified.

1.2.2.2 Display Settings
- Legend: By default, displayed at the top, but can be switched to the bottom, left, right, or none (none means the legend is not displayed).

- Data Labels:
- Label Display:
- Smart Display: Based on the current display area, intelligently shows value labels. When values between different metrics are close, some labels may be automatically hidden.
- Force Display: Shows all value labels based on the current display area. When values between different metrics are close, there may be overlapping.
- Do Not Display: Value labels are not shown.
- Data Label Settings: Customize whether to display data labels for specific metrics.
- Position: Includes outer, inner center, and inner near axis.
- Label Display:

- Show Total:
- Display Mode: By default, it is displayed, but can be switched to not displayed. When displayed, it can be shown in edit, detail, and card views (based on specific configuration). When not displayed, it is not shown in any view.

- Data Table: You can set whether to display the data table and its position. By default, it is not displayed, but can be switched to display at the top, bottom, left, or right of the chart.
- Card View Does Not Display Data Table: This configuration can be set based on the data table display, and it is checked by default.

- Thumbnail Axis: By default, it is smartly adapted, but can be switched to display or not display.
- Smart Adaptation: Intelligently determines the number of bars that can be displayed based on the current chart display area. If the number of bars exceeds the displayable amount, a thumbnail axis appears. If not, there is no thumbnail axis.
- Display: Regardless of screen size or number of bars, the thumbnail axis is displayed.
- Do Not Display: Regardless of screen size or number of bars, the thumbnail axis is not displayed.
- Note: When setting to display/smart display, the custom selection box feature is also enabled.

- Show Tooltip: When checked, hovering the mouse over the chart will display the corresponding dimension and metric values. When unchecked, hovering will not display these values.

- Do Not Display Chart Type: When checked, the viewer cannot switch chart types in view/preview mode.

1.2.2.4 Color and Font
- Color Scheme: The system supports 12 preset color schemes and 1 global custom color scheme. The default is Elegant White and Blue. Additionally, you can enable accessibility pattern settings and display bar background colors.
- Preset Color Schemes: 12 preset color schemes, each with 12 colors.
- Global Custom Color Scheme: A global color scheme can be defined in the global configuration, which can be used by all charts.
- Chart-Level Custom Color: Customize the display color of bars for specific metrics.
- Font Size: Default is 12, but can be switched to 13, 14, 15, or 16.

1.2.2.5 Axis
- X-Axis
- Show Title: By default, not checked. When checked, the dimension field name is echoed and can be adjusted.
- Title: When Show Title is not checked, it is read-only. When checked, it can be modified.
- Show Title: By default, not checked. When checked, the dimension field name is echoed and can be adjusted.
- Axis Labels
- Display Mode:
- Smart Display: Based on the current dimension display area, intelligently shows the number of dimension values. If it exceeds the displayable area, it shows “…”
- Force Display: Shows all dimension values. If dimension values are long, there may be overlapping.
- Custom Display: By default, shows 3 characters, with a maximum of 12 characters.
- Display Mode:

- Y-Axis
- Axis Labels: By default, labels are checked, but can be unchecked.
- Label Angle: Based on the checked axis labels, the label angle can be further set. The default is horizontal, but can be switched to 45° left or vertical (display effect is the same as X-axis label angle).
- Show Grid Lines: By default, checked, but can be unchecked.
- Left Axis:
- Show Title: When checked, the axis label name is displayed and can be customized.
- Axis Range: Supports customizing the maximum/minimum range of the axis interval.
- Right Axis:
- Show Title: When checked, the axis label name is displayed and can be customized.
- Axis Range: Supports customizing the maximum/minimum range of the axis interval.

1.2.3 Function Configuration
1.2.3.1 Advanced Configuration
- Show Reference Line: You can set the reference line for the chart. By default, it is not checked. A chart can have up to 6 reference lines.
- Name: Set the name of the reference line.
- Reference Value: By default, it is a constant, but can be switched to interval, average, maximum, or minimum of a metric. When selecting a constant, a specific value can be set.
- Reference Type: Dashed line, circle, diamond, rectangle, droplet shape.
- Show Reference Line Name: By default, not displayed, but can be checked to display.
- Show Reference Line Value: By default, not displayed, but can be checked to display.
- Color: Customize the color of the reference type.

- Show Dimensions with Zero Metrics: By default, not checked, but can be checked to display dimensions with zero metrics.

- SN: By default, not checked, but can be checked to display SN.

- Sorting: By default, not checked, but can be checked to set dimension sorting based on itself and TopN, or dimension sorting based on a specific metric and TopN. TopN can be preset or manually entered, and display rules support parallel continuous, parallel non-continuous, and non-parallel continuous.
- When the dimension is an enumeration value or Dept. field, custom sorting is supported.

1.2.4 Style (Mobile)
1.2.4.1 Follow Web Layout
- Follows the Web layout echo and cannot be set independently.

1.2.4.2 Independent Configuration Layout
- By default, it echoes the content selected in the corresponding Web configuration item, but can be further adjusted to better suit mobile display effects.
- The content and options of configuration items are fewer than those on the Web. Configuration items that cannot be set independently on mobile default to the Web configuration. The display effect and logic of configurable items are the same as on the Web.
