Stacked Bar Chart Visualization with lc_pie_bar_*

The lc_pie_bar_* prefix is used for SVG element IDs that need to display a horizontal stacked bar chart with a legend. Each segment represents a proportion of the total, making it ideal for showing part-to-whole relationships, category breakdowns, and distribution analysis at a glance.


Element Identification

The target element must be a <rect> with an ID that starts with lc_pie_bar_* for stacked bar chart visualization.

Input Format

The input value must be provided as a JSON object containing a data array of segment objects.

JSON Format 

{
  "data": [
    {
      "label": "Product Questions",
      "color": "#1ABC84",
      "value": 380,
      "displayValue": "38%"
    },
    {
      "label": "Implementation Support",
      "color": "#F59E0B",
      "value": 140,
      "displayValue": "14%"
    },
    {
      "label": "Escalated Tickets",
      "color": "#111111",
      "value": 20,
      "displayValue": "2%"
    },
    {
      "label": "Usage and Adoption Reviews",
      "color": "#1D9BF0",
      "value": 260,
      "displayValue": "26%"
    },
    {
      "label": "Renewal and Commercial Questions",
      "color": "#DC3232",
      "value": 200,
      "displayValue": "20%"
    }
  ],
  "fontSize": 12,
  "fontColor": "#222222",
  "barHeight": 24
}

Important Notes:

  • Segments with zero, negative, or non-numeric values are silently skipped
  • displayValue is shown in the legend as-is — it does NOT affect segment proportions (proportions are always based on value)
  • Key names are case-insensitive for the first character (e.g. Label and label both work)
  • If data is not passed in the correct format, the element will display as a plain <rect> without any chart visualization

Configuration Properties

Required Segment Properties

  • label: Display name for the segment (string, mandatory)
  • value: Numeric value for the segment (number, mandatory — zero, negative, and non-numeric values are skipped)

Optional Segment Properties

Property Type Description
displayValue string Text shown in the legend (e.g. “38%”) — does not affect bar proportions
color string Custom hex color code or color name for the segment fill

Optional Chart-Level Properties

Property Type Description
barHeight number Custom bar height in pixels (defaults to the full rect height)
fontSize number Font size for legend text in pixels (auto-calculated from bar height if not set)
fontColor string Color for legend text (defaults to the current chart’s text color)

Color Specifications

Custom Color:

  • Provide hex color codes: "#1ABC84", "#F59E0B"
  • Use CSS color names: "red", "blue", "green"
  • Each segment can have its own individual color

Default Behavior:

  • If no color is provided, colors are auto-assigned from the appearance settings and project color palette (castColor(0), castColor(1), etc.)

Compatibility: Works with <rect> elements only

Layout Behaviour

  • The stacked bar occupies 80% of the rect width, left-aligned with padding
  • When barHeight is omitted, the bar fills the full rect height
  • When a custom barHeight is set and leaves enough room, the legend is placed inside the rect below the bar; otherwise the legend renders below the rect boundary
  • Legend items wrap to multiple lines if the rect is narrow
  • Long labels are truncated with … based on available space
  • Segments use selective corner rounding — left corners on the first segment, right corners on the last

Highlighting Segments

Stacked bar charts support two levels of highlighting during your presentation:

Whole-Chart Visibility

Use the chart ID (e.g. lc_pie_bar_tickets) in your highlight configuration to control the entire chart’s visibility. The chart fades in with a left-to-right fill animation when it first becomes visible.

Segment-Level Highlighting with __elements:

Use the __elements: suffix to highlight specific segments by label. The system matches segment labels from your highlight payload against the data.

Highlight Format:

Single segment:

[{ "label": "Negotiation" }]

Multiple segments:

[{ "label": "Closed Won" }, { "label": "Closed Lost" }]

How to Add Highlights in Cast Designer:

  1. Open your project in Cast designer
  2. Navigate to the Narration tab
  3. Click on Visual Explanations for the slide with your stacked bar chart
  4. Find the liquid block for your lc_pie_bar element
  5. Add the highlight format directly in the liquid block


Highlight Modes

The system automatically selects the best mode based on available space and context:

Waterfall Mode (default when space allows)

  • All segments translate down into a waterfall layout extending below the bar
  • Each highlighted segment gets its own row; contiguous non-highlighted segments share a row
  • Breakout labels appear beside highlighted segments showing the label and display value
  • A frosted glass overlay appears behind the waterfall and legend area (below the rect only, NOT behind the original bar)
  • The legend shifts down to clear the waterfall rows
  • Rows stagger in with a slight delay between them (~0.08s)


Modal Popup Mode (when waterfall doesn’t fit)

  • A centered modal card appears with a frosted glass backdrop
  • The modal contains a stacked bar replica, waterfall rows, and legend
  • Breakout labels appear inside the modal for highlighted segments
  • The original bar and legend remain visible at full opacity behind the modal


Opacity-Only Mode (multiple charts highlighted simultaneously)

  • When two or more lc_pie_bar rects have __elements: highlights in the same step, all charts fall back to opacity-only mode
  • Highlighted segments stay at full opacity; others dim
  • No waterfall, no popup, no glass overlay

Highlight Behaviour Summary

Scenario Behaviour
Chart ID only (no __elements) Whole chart fades in with left-to-right fill animation
__elements: with space Waterfall layout with breakout labels and glass
__elements: without space Modal popup with stacked bar and waterfall inside
Multiple rects with __elements Opacity-only — no waterfall or modal
Non-existent label No matches — all segments restored to full opacity
Empty __elements:[] No effect — chart stays at current state

Example Usage

Example 1: Simple Two-Segment Breakdown 

{
  "data": [
    { "label": "Won", "value": 340, "displayValue": "68%" },
    { "label": "Lost", "value": 160, "displayValue": "32%" }
  ]
}

Example 2: Support Ticket Categories with Custom Colors 

{
  "data": [
    {
      "label": "Product Questions",
      "color": "#1ABC84",
      "value": 380,
      "displayValue": "38%"
    },
    {
      "label": "Implementation Support",
      "color": "#F59E0B",
      "value": 140,
      "displayValue": "14%"
    },
    {
      "label": "Escalated Tickets",
      "color": "#111111",
      "value": 20,
      "displayValue": "2%"
    },
    {
      "label": "Usage and Adoption Reviews",
      "color": "#1D9BF0",
      "value": 260,
      "displayValue": "26%"
    },
    {
      "label": "Renewal and Commercial Questions",
      "color": "#DC3232",
      "value": 200,
      "displayValue": "20%"
    }
  ]
}

Example 3: Custom Bar Height and Font Size 

{
  "data": [
    { "label": "Alpha", "value": 60 },
    { "label": "Beta", "value": 40 }
  ],
  "barHeight": 32,
  "fontSize": 14
}

Example 4: Quarterly Breakdown (Auto-Colored) 

{
  "data": [
    { "label": "Q1", "value": 25 },
    { "label": "Q2", "value": 25 },
    { "label": "Q3", "value": 25 },
    { "label": "Q4", "value": 25 }
  ]
}

Example 5: Narration with Segment Highlights

Your Stacked Bar Data:

{
  "data": [
    { "label": "Prospecting", "color": "#1ABC84", "value": 320, "displayValue": "32%" },
    { "label": "Discovery", "color": "#60A5FA", "value": 180, "displayValue": "18%" },
    { "label": "Proposal", "color": "#818CF8", "value": 150, "displayValue": "15%" },
    { "label": "Negotiation", "color": "#FBBF24", "value": 120, "displayValue": "12%" },
    { "label": "Closed Won", "color": "#34D399", "value": 170, "displayValue": "17%" },
    { "label": "Closed Lost", "color": "#F87171", "value": 60, "displayValue": "6%" }
  ],
  "barHeight": 90
}

Narration Steps:

  1. Step 1: “Here’s your sales pipeline breakdown…”

    • Liquid block: No highlight (whole chart visible)
    • Result: All segments appear at full brightness with left-to-right fill animation

  2. Step 2: “Prospecting makes up the largest share at 32%…”

    • Liquid block: [{"label": "Prospecting"}]
    • Result: Waterfall layout with “Prospecting” breakout label

  3. Step 3: “Discovery and Proposal together account for 33% of the pipeline…”

    • Liquid block: [{"label": "Discovery"}, {"label": "Proposal"}]
    • Result: Both segments highlighted with individual breakout labels

  4. Step 4: “Let’s look at the closed deals — 17% won vs 6% lost…”

    • Liquid block: [{"label": "Closed Won"}, {"label": "Closed Lost"}]
    • Result: Previous waterfall clears, new waterfall for both closed segments

  5. Step 5: “Overall, your pipeline looks healthy…”

    • Liquid block: No highlight
    • Result: All segments return to full opacity, waterfall removed

Data Handling

  • Segments with value of 0, negative, or non-numeric are silently skipped
  • If all segments are invalid, nothing renders and the original rect stays hidden
  • If the JSON is malformed or the data array is missing, the handler returns early without crashing
  • On re-render with the same ID but new data, previous elements are cleaned up automatically
  • Key names are case-insensitive for the first character (Label and label both work)
This site uses Just the Docs, a documentation theme for Jekyll.