The Chart element creates compelling visualizations that help users imagine their future success. By showing potential progress, you build emotional investment before asking for commitment.
Chart element configuration

​
When to Use

Perfect for:
  • Weight loss journeys - Show potential progress over time
  • Learning curves - Visualize skill development
  • Financial growth - Display savings or earnings potential
  • Fitness progress - Illustrate strength or endurance gains
  • Habit tracking - Demonstrate consistency benefits
Charts work best after collecting user data (goals, current state) to create personalized visualizations that resonate emotionally.

​
Configuration

​
Line Type

Choose your visualization style:
TypeBest ForVisual Impact
LineContinuous progressSmooth journey
BezierNatural growthRealistic curves
StepMilestone-basedClear stages
AreaVolume/accumulationFilled progress

​
Data Points

Define your chart’s journey: Start Value
  • Current state or baseline
  • Can use variables: {{current-weight}}
  • Sets emotional starting point
End Value
  • Goal or target state
  • Shows achievable outcome
Date Range
  • Time period for transformation
  • Today to future date
  • Creates urgency and realistic timeline

​
Visual Elements

Badges Add context at specific points: 
Start: "Today: {{weight}} lbs"
End: "Goal: {{target-weight}} lbs"
Badges support variables for personalization. Animation Duration Chart draws itself on screen:
  • 1000ms - Quick reveal
  • 2000ms - Dramatic build
  • 3000ms - Slow emphasis
Longer animations (2-3 seconds) create anticipation and give users time to process the visualization.

​
Creating Emotional Impact

​
The Progress Principle

Charts leverage psychological principles:
  1. Visualization - Seeing the journey makes it feel achievable
  2. Commitment - Imagining success increases investment
  3. Gap Awareness - Shows distance between current and desired state
  4. Social Proof - Implies others have succeeded

​
Personalization Strategy

Most effective approach:
1

Collect Current State

Use Text Input or Options: “What’s your current weight?”
2

Gather Goal

“What’s your target weight?”
3

Show Personalized Chart

Chart from {{current}} to {{target}} “Your 90-day transformation”
4

Present Offer

“Start your journey today” Checkout or Plan Picker

​
Common Patterns

​
Weight Loss Funnel

Start: {{current-weight}}
End: {{target-weight}}
Duration: 90 days
Badge Start: "Day 1: {{current-weight}} lbs"
Badge End: "Day 90: {{target-weight}} lbs 🎉"
Type: Bezier (natural loss curve)

​
Learning Progress

Start: 0
End: 100
Duration: 30 days
Badge Start: "Beginner"
Badge End: "Expert Level"
Type: Step (skill milestones)

​
Savings Growth

Start: {{current-savings}}
End: {{current-savings + 5000}}
Duration: 12 months
Badge Start: "${{current-savings}}"
Badge End: "${{target-savings}}"
Type: Area (accumulated wealth)

​
Fitness Journey

Start: {{current-pushups}}
End: {{current-pushups * 3}}
Duration: 60 days
Badge Start: "{{current-pushups}} pushups"
Badge End: "{{target-pushups}} pushups!"
Type: Line (steady progress)

​
Mobile Optimization

Charts adapt beautifully to mobile: Responsive Scaling
  • Maintains proportions
  • Touch-friendly interaction
  • Clear label visibility
Performance
  • Lightweight SVG rendering
  • Smooth animations
  • No layout shift
Readability
  • Automatic font sizing
  • High contrast colors
  • Clear data points

​
Combining with Other Elements

​
Chart + Testimonial

Chart showing typical results
↓
Reviews element with success stories
"I lost 30 lbs in 90 days!"

​
Chart + Timer

Chart showing potential progress
↓
Timer creating urgency
"Start your transformation in {{timer}}"

​
Chart + Options

Options: "What's your goal?"
↓
Chart customized to selected goal
↓
Targeted offer based on goal

​
Psychology Tips

​
Make It Achievable

  • Show realistic progress
  • Use gradual curves, not steep lines
  • Include minor setbacks for authenticity

​
Create Anticipation

  • Slow animation builds excitement
  • Reveal chart after collecting goals
  • Use ascending trends (up and to the right)

​
Build Credibility

  • Add “Based on average results” text
  • Include disclaimer if needed
  • Show realistic timelines

​
Design Best Practices

​
Color Psychology

  • Green - Growth, health, money
  • Blue - Trust, stability, calm
  • Orange - Energy, enthusiasm
  • Purple - Transformation, premium

​
Visual Hierarchy

  1. Chart dominates the screen
  2. Clear start/end labels
  3. Supporting text below
  4. CTA button prominent

​
Animation Timing

  • Trigger on scroll into view
  • Not too fast (loses impact)
  • Not too slow (loses attention)
  • Sync with other animations

​
Testing Variables

A/B test these elements:
  1. Chart type - Line vs Area
  2. Animation speed - 1s vs 3s
  3. Personalization - Generic vs Custom
  4. Timeline - 30 vs 60 vs 90 days
  5. Badge text - Different messaging

​
Troubleshooting

​
Conversion Impact

Charts increase conversion by:
  • Visualization: +15-20% when personalized
  • Commitment: +10-15% emotional investment
  • Credibility: +5-10% with realistic progress
Charts work best in the middle of funnels, after collecting user data but before presenting offers.

​
Advanced Techniques

​
Multi-Chart Comparison

Show different scenarios: 
Chart 1: "Without our program"
Chart 2: "With our program"
Visual contrast drives action

​
Interactive Charts

Combine with inputs: 
Slider: Adjust goal
Chart: Updates dynamically
Users explore possibilities

​
Social Proof Integration

Chart: "Your potential progress"
Text: "Join 10,000+ achieving their goals"
Reviews: Success stories

​
Next Steps