Butterfly Chart

Butterfly Chart

1.1 Use Case

The butterfly chart enables comparison of distribution differences between two correlated metrics under the same dimension, such as analyzing the distribution gap between high-value and low-value Accounts across different industries.

picture coming soon:

1.2 Chart Configuration

1.2.1 Axis Data

• Dimension: 1 dimension
• Metrics: 2 metrics

picture coming soon:

1.2.2 Styling (Web)

1.2.2.1 Basic Settings

• Chart Title: Defaults to the analysis Subject name during creation; customizable in chart settings.
• Notes:
  • Content: Add contextual notes to clarify the chart’s insights.
  • Display Options:
    • Collapsed: Shows as an icon next to the title; hover to reveal note content.
    • Expanded: Displays note text directly below the title.
    • Hidden: Notes are not shown in any view.
• Metric Names: Displays metric names by default; editable.
• Dimension Names: Displays dimension names by default; editable.

picture coming soon:

1.2.2.2 Display Settings

• Legend: Defaults to top position; options include bottom, left, right, or hidden.

picture coming soon:

• Data Labels:
  • Visibility:
    • Smart Display: Auto-hides overlapping labels for clarity.
    • Force Display: Shows all labels (may overlap).
    • Hidden: No labels shown.
  • Customization: Toggle labels per metric.
  • Position: Outer, inner center, or inner near axis.

picture coming soon:

• Show Total:
  • Options: Display (default) or hide totals in edit/detail/card views.

picture coming soon:
picture coming soon:

• Data Table:
  • Position: Top, bottom, left, or right (default: hidden).
  • Hide in Card View: Enabled by default when table is shown.

picture coming soon:

• Scrollbar:
  • Smart Fit: Auto-shows scrollbar if data exceeds display area.
  • Always Show: Forces scrollbar visibility.
  • Hidden: Never shows scrollbar.
  • Note: Enables custom data selection when set to “Smart Fit” or “Always Show.”

picture coming soon:

• Tooltip: Toggle hover-to-show dimension/metric values.

picture coming soon:

• Hide Chart Type Switch: Disables chart type switching in view/preview modes.

picture coming soon:
picture coming soon:

1.2.2.4 Colors & Fonts

• Color Schemes:
  • 12 preset palettes + 1 global custom palette (default: Elegant White-Blue).
  • Options: Enable accessibility patterns or column background colors.
  • Customization: Per-metric color overrides.
• Font Size: Default 12; adjustable to 13–16.

picture coming soon:

1.2.2.5 Axes

• X-Axis:
  • Title: Hidden by default; toggle to show/edit dimension name.
• Axis Labels:
  • Smart Display: Auto-truncates long labels with “…”.
  • Force Display: Shows full labels (may overlap).
  • Custom: Set character limit (default: 3; max: 12).

picture coming soon:

• Y-Axis:
  • Labels: Shown by default; toggle visibility.
  • Angle: Horizontal (default), 45° left, or vertical.
  • Gridlines: Shown by default.
  • Left/Right Axis:
    • Title: Toggle to show/edit label names.
    • Range: Customize min/max values.

picture coming soon:

1.2.3 Advanced Features

1.2.3.1 Advanced Configuration

• Reference Lines: Add up to 6 lines per chart.
  • Name: Custom label.
  • Value Type: Constant, range, or metric-derived (avg/max/min).
  • Style: Dashed, circle, diamond, rectangle, or droplet.
  • Display Options: Toggle name/value visibility.
  • Color: Customizable.

picture coming soon:

• Show Zero-Value Dimensions: Hidden by default.

picture coming soon:

• SN: Toggle to show row numbering.

picture coming soon:

• Sorting:
  • Sort dimensions naturally or by metric values (TopN supported).
  • For enum/Dept. fields: Custom sort orders available.

picture coming soon:

1.2.4 Mobile Styling

1.2.4.1 Inherit Web Layout

• Mirrors Web settings; no independent configuration.

picture coming soon:

1.2.4.2 Custom Mobile Layout

• Adjusts Web settings for mobile-optimized display.
  • Note: Fewer options than Web; unchanged settings inherit Web configurations.

picture coming soon: