Butterfly Chart

Butterfly Chart

1.1 Use Cases

The Butterfly Chart compares the distribution differences between two related metrics on the same dimension. For example, comparing the distribution of high-value versus low-value customers across 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: Defaults to the analysis Subject when created; you can rename it in chart settings
• Notes:
  • Note content: Add contextual notes for this chart so viewers better understand what it represents
  • Note display:
    • Collapsed: Shows an icon after the chart title in detail and card views; hover to see the note
    • Exposed: Displays the note text directly after the chart title in detail and card views
    • Hidden: The note does not appear in detail or card views
• Metric label: Shows metric name by default; you can edit the displayed text
• Dimension label: Shows dimension name by default; you can edit the displayed text

1.2.2.2 Display Settings

• Legend: Default position is Top; you can switch to Bottom, Left, Right, or None (None hides the legend)

• Data labels:
  • Label display:
    • Smart: Shows value labels intelligently based on available space; when metrics are close, some labels may hide automatically
    • Force: Shows all value labels regardless of space; labels may overlap when values are similar
    • None: Hides all value labels
  • Per-metric label control: Choose whether each metric shows a data label
  • Position: Outer, Center (inside), Inner near axis

• Show totals:
  • Display mode: Default is On; you can turn it Off. When On, totals can be shown in Edit, Detail, and Card views (depending on configuration). When Off, totals are hidden in all views.

• Data table: Toggle whether to display a data table and its position. Default is hidden. When enabled, table can appear above, below, left, or right of the chart.
  • Hide in card view: When a data table is enabled, you can choose to hide it specifically in Card view. This option is selected by default.

• Thumb axis (mini navigator): Default is Smart; you can set to Show or Hide.
  • Smart: Automatically determines how many bars can fit. If the number of bars exceeds the visible limit, the thumb axis appears; otherwise it stays hidden.
  • Show: Always display the thumb axis regardless of screen size or number of bars.
  • Hide: Never display the thumb axis regardless of screen size or number of bars.
  • Note: Enabling Show or Smart also enables custom range selection (drag-to-select).

• Tooltip visibility: When checked, hovering over chart elements shows the dimension and metric values. Unchecked disables hover tooltips.

• Disable chart type switch: When enabled, viewers cannot switch chart types in View/Preview modes.

1.2.2.4 Colors & Fonts

• Color schemes: The system provides 12 preset palettes plus one global custom palette. Default is “Elegant White & Blue”. You can also enable accessibility patterns and bar background color.
  • Preset palettes: 12 palettes, each containing 12 colors
  • Global custom palette: Configure one global palette in global settings for all charts to use
  • Chart-level custom colors: Assign specific bar colors per metric
• Font size: Default 12px; options: 13, 14, 15, 16

1.2.2.5 Axes

• X axis
  • Show title: Off by default. When enabled, the dimension field name appears and can be edited.
    • Title: When Show title is unchecked, the field is read-only; when checked, you can modify it.

• Axis labels
  • Display mode:
    • Smart: Automatically truncates dimension labels based on available space, showing "..." when they exceed the display area
    • Force: Shows full labels for all dimension values; may overlap if values are long
    • Custom: Default shows 3 characters; can set between 3 and 12 characters

• Y axis
  • Axis labels: Checked by default; you can uncheck to hide labels
  • Label angle: When axis labels are enabled, set angle to Horizontal (default), Left 45°, or Vertical (same rotation behavior as X axis)
  • Show grid lines: Checked by default; can be unchecked
  • Left axis:
    • Show title: When checked, displays the axis title and allows custom text
    • Axis range: Set custom min/max for the axis range
  • Right axis:
    • Show title: When checked, displays the axis title and allows custom text
    • Axis range: Set custom min/max for the axis range

1.2.3 Functional Configuration

1.2.3.1 Advanced Settings

• Marker lines: Configure up to 6 marker lines per chart. Default is Off.
  • Name: Set the marker line name
  • Value type: Default is Constant; can switch to Range, Metric Average, Metric Max, or Metric Min. For Constant, enter a specific value.
  • Marker shape: Dashed line, Circle, Diamond, Rectangle, Teardrop
  • Show marker name: Off by default; enable to display
  • Show marker value: Off by default; enable to display
  • Color: Choose the marker color

• Show dimensions with zero metric: Off by default. Enable to include dimension values where the metric is zero.

• SN: Off by default. Enable to display serial numbers (SN).

• Sorting: Off by default. When enabled, you can:
  • Sort the dimension by its natural order and apply Top N
  • Sort the dimension by a specific metric and apply Top N
  • Top N: Choose a preset or enter a custom value
  • Display rules support: Tied continuous, Tied non-continuous, Non-tied continuous
• For enumerated dimensions or Dept. fields, custom ordering is supported.

1.2.4 Style (Mobile)

1.2.4.1 Follow Web Layout

• Inherit the Web layout; cannot be configured independently.

1.2.4.2 Independent Mobile Layout

• Default mobile display follows the selected Web options, but can be further adjusted for better mobile presentation.
  • Mobile has fewer configurable options than Web. Items that cannot be set on mobile follow Web settings. Available mobile options behave and render the same as on Web.