Slope Visualization with lc_slope_*

The lc_slope_* prefix is used for SVG element IDs that need to display slope data visualizations, ideal for showing trends, comparisons between two data points, and directional changes over time or categories.


Use Cases

  • Performance comparisons between two time periods
  • Before/after analysis and trend visualization
  • Sales performance tracking and revenue changes
  • Progress tracking and goal achievement
  • Comparative analysis between categories or segments
  • Change indicators and directional trends

Element Identification

The target element must be a <rect> with an ID that starts with lc_slope_* for slope chart visualizations.

Input Format

The input value must be provided as a JSON array of objects with the following structure:

JSON Format

A JSON string containing an array of objects with the following structure:

[
  {
    "label": "North America",
    "start": 2450000,
    "end": 2890000,
    "color": "#2ecc71"
  },
  {
    "label": "Europe",
    "start": 1850000,
    "end": 2100000,
    "color": "#3498db"
  },
  {
    "label": "Asia Pacific",
    "start": 1620000,
    "end": 1450000,
    "color": "#e74c3c"
  },
  {
    "label": "Latin America",
    "start": 980000,
    "end": 1250000,
    "color": "#f39c12"
  }
]

Dataset/CSV Format

Alternatively, you can use tabular data from your datasets with the following columns:

label start end color
North America 2450000 2890000 #2ecc71
Europe 1850000 2100000 #3498db
Asia Pacific 1620000 1450000 #e74c3c
Latin America 980000 1250000 #f39c12
Middle East 650000 780000 #9b59b6

Dataset Usage:

  • Connect your slope chart to a dataset containing the required columns
  • The system will automatically map the columns to the appropriate chart properties
  • Filter data by categories or time ranges to show relevant slope comparisons
  • Multiple rows create multi-line slope visualizations for comprehensive trend analysis

Important Notes:

  • Column names must match exactly as shown in the example (label, start, end, color)
  • Column names are case-sensitive and must be spelled exactly as specified
  • If data is not passed in the correct format or column names don’t match, the element will display as a plain <rect> without any slope visualization
  • The label field is required for identifying each slope line (especially for highlighting)
  • The start and end fields must contain numeric values for proper slope calculation

Implementation Steps for Dataset Usage

To use dataset/CSV format with slope charts, follow these steps:

Create Dataset: Import your data containing the required columns (label, start, end, color)

Create Field: Create a field from your dataset that contains the slope chart data

Set Value Formatting: In the field settings, set Value Formatting to “JSON” - this is crucial for proper data formatting


Override SVG Variables: In the SVG slide design tab, go to “Override SVG Variables”

Select Variable: Choose your slope chart variable and use the format:


Include JSON Filter: Critical: Always include the | json filter with your field, otherwise the slope chart will not work

Configuration Properties

Required Properties:

  • label: Text identifier for the slope line (mandatory, used for highlighting and identification)
  • start: Numeric starting value for the slope line (mandatory)
  • end: Numeric ending value for the slope line (mandatory)

Optional Properties:

  • color: Color specification for the slope line, dots, and labels (optional)

Color Specifications

Single Color:

  • Provide a color value: "red", "#FF0000", "#2ecc71"
  • Uses CSS color names or hex values

Color Behavior:

  • If no color is provided, colors will be auto-assigned from the appearance settings and project color palette
  • Each slope line can have its own individual color specification
  • Colors ensure visual distinction between different slope lines

Visual Elements

  • Slope Lines: Connect start and end points showing direction and magnitude of change
  • Data Points: Visual indicators at start and end positions
  • Labels: Display actual values with proper positioning to avoid overlaps

Compatibility: Works with <rect> elements only

Example Usage

Example 1: Quarterly Revenue by Region (Q1 to Q2 2024) 

[
  { "label": "North America", "start": 2450000, "end": 2890000 },
  { "label": "Europe", "start": 1850000, "end": 2100000 },
  { "label": "Asia Pacific", "start": 1620000, "end": 1450000 },
  { "label": "Latin America", "start": 980000, "end": 1250000 }
]

Example 2: Customer Satisfaction Scores (Before/After Initiative) 

[
  {
    "label": "Product Support",
    "start": 78.5,
    "end": 92.3,
    "color": "#2ecc71"
  },
  {
    "label": "Sales Experience",
    "start": 85.2,
    "end": 88.7,
    "color": "#3498db"
  },
  { "label": "Onboarding", "start": 72.8, "end": 95.1, "color": "#f39c12" },
  { "label": "Documentation", "start": 68.3, "end": 71.5, "color": "#e74c3c" },
  {
    "label": "Account Management",
    "start": 91.2,
    "end": 93.8,
    "color": "#9b59b6"
  }
]

Highlighting Individual Slope Lines

Slope charts support selective highlighting during your presentation, allowing you to draw attention to specific slope lines while others fade into the background.

How It Works:

When you reference a slope line’s label in your narration, that line automatically highlights (full brightness) while other lines dim to about 12% brightness. Labels remain fully visible so your audience can always read them.

Setting Up Highlights:

To enable highlighting, your slope data must include the label property. The system matches these labels with your highlight configuration to determine which slope lines to highlight.

How to Add Highlights in Cast Designer:

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

Highlight Format:

Single slope line:

[{ "label": "North America" }]

Multiple slope lines:

[{ "label": "North America" }, { "label": "Europe" }]

All slope lines visible (no dimming):

(Don't add any highlight to the liquid block)

Example 1: Regional Revenue Growth (Q1 to Q2 2024)

Your Slope Data:

[
  {
    "label": "North America",
    "start": 2450000,
    "end": 2890000,
    "color": "#2ecc71"
  },
  { "label": "Europe", "start": 1850000, "end": 2100000, "color": "#3498db" },
  {
    "label": "Asia Pacific",
    "start": 1620000,
    "end": 1450000,
    "color": "#e74c3c"
  },
  {
    "label": "Latin America",
    "start": 980000,
    "end": 1250000,
    "color": "#f39c12"
  }
]

Setting Up Visual Explanations:

In Cast designer:

  1. Navigate to Narration tab
  2. Click on Visual Explanations
  3. Find the liquid block for your lc_slope element (e.g., lc_slope_revenue)
  4. Add the highlight format directly in the liquid block

Preview Result:

Narration Steps:

  1. Narration Step 1: “North America led our growth with 18% revenue increase…”

    • Add to liquid block: [{"label": "North America"}]
    • Result: North America line stays bright, all others dim

  2. Narration Step 2: “Europe also showed positive momentum…”

    • Add to liquid block: [{"label": "Europe"}]
    • Result: Europe line brightens, North America/Asia Pacific/Latin America dim

  3. Narration Step 3: “Asia Pacific experienced a decline…”

    • Add to liquid block: [{"label": "Asia Pacific"}]
    • Result: Asia Pacific line brightens, others dim

  4. Narration Step 4: “Overall, three of four regions grew…”

    • Add to liquid block: Don’t add any highlight
    • Result: All slope lines appear at full brightness

Example 2: Customer Satisfaction Scores (Before/After Initiative)

Your Slope Data:

[
  {
    "label": "Product Support",
    "start": 78.5,
    "end": 92.3,
    "color": "#2ecc71"
  },
  {
    "label": "Sales Experience",
    "start": 85.2,
    "end": 88.7,
    "color": "#3498db"
  },
  { "label": "Onboarding", "start": 72.8, "end": 95.1, "color": "#f39c12" },
  { "label": "Documentation", "start": 68.3, "end": 71.5, "color": "#e74c3c" },
  {
    "label": "Account Management",
    "start": 91.2,
    "end": 93.8,
    "color": "#9b59b6"
  }
]

Liquid Block Highlights:

  1. All Departments Overview: Show all slope lines together (no specific highlight)

    • Liquid block: Don’t add any highlight
    • Result: All lines appear at full brightness

  2. Focus on Onboarding: “Onboarding satisfaction improved by 31%…”

    • Liquid block: [{"label": "Onboarding"}]
    • Result: Onboarding line brightens, others dim

  3. Product Support Improvement: “Product Support also saw significant gains…”

    • Liquid block: [{"label": "Product Support"}]
    • Result: Product Support line brightens, others dim

  4. Compare Top Performers: “Both Onboarding and Product Support exceeded targets…”

    • Liquid block: [{"label": "Onboarding"}, {"label": "Product Support"}]
    • Result: Both Onboarding and Product Support lines bright, others dim

Example 3: Department Performance Tracking

Your Slope Data:

[
  {
    "label": "Engineering",
    "start": 850000,
    "end": 1020000,
    "color": "#4285F4"
  },
  { "label": "Sales", "start": 920000, "end": 780000, "color": "#EA4335" },
  { "label": "Marketing", "start": 670000, "end": 890000, "color": "#FBBC04" }
]

Liquid Block Highlights:

  • “Engineering delivered exceptional results…“

    • Liquid block: [{"label": "Engineering"}]
    • Result: Engineering line highlights

  • “Sales faced market challenges…“

    • Liquid block: [{"label": "Sales"}]
    • Result: Sales line highlights

  • “Marketing’s new strategy paid off…“

    • Liquid block: [{"label": "Marketing"}]
    • Result: Marketing line highlights

  • “Looking at all departments together…“

    • Liquid block: Don’t add any highlight
    • Result: All lines at full brightness