## Line Chart Widget

The Line Chart widget visualizes data trends over time, making it perfect for spotting patterns, growth trends, and seasonal fluctuations. This is one of the most commonly used widgets for understanding business performance.

### When to Use

- Show metric trends over time (daily, weekly, monthly)
- Compare multiple metrics on the same timeline
- Identify seasonal patterns and cyclical trends
- Visualize growth or decline in key metrics
- Spot anomalies or sudden changes in performance

#### Configuration Options

### Content Settings

#### Title (Required)

Examples: "Sales Trend", "Profit Over Time", "Revenue vs Costs"

### Data Type (Required)

Options:

- Data by Date: Time series data (default and most common)
- Categorized Data: Data grouped by categories shown over time
- Data Tables: Tabular data visualized as line chart

Recommended: Data by Date for time-based trending

### Metrics (Required)

What it is: The data series to display as lines

Configuration:

1. Click Add Metric
2. Select metric from dropdown (searchable)
3. Assign label (optional custom label)
4. Choose color for this line
5. Select icon (optional)
6. Click Add
7. Repeat for additional lines (up to 4-5 recommended)

Available time series metrics:

- Revenue metrics: Total Revenue, Revenue Excl. Tax, Revenue by Date
- Profit metrics: Gross Profit, Net Profit, Profit Margin by Date
- Order metrics: Order Count, Average Order Value by Date
- Cost metrics: Total Costs, Product Costs, Ad Spend by Date
- Customer metrics: New Customers, Returning Customers by Date
- Analytics metrics: Sessions, Page Views, Conversion Rate by Date

### Date Format

What it controls: Time granularity on X-axis

Options:

- Auto (recommended): Automatically selects best format
  - 1-3 days: Hourly
  - 4-60 days: Daily
  - 61-365 days: Weekly
  - 366+ days: Monthly
- Day: One data point per day
- Month: One data point per month
- Quarter: One data point per quarter (Q1, Q2, Q3, Q4)
- Year: One data point per year

Recommendation: Use Auto for best results

#### Design Settings

### Responsive Width

Desktop/Tablet/Mobile Columns (1-12):

- Full width: 12 columns (recommended for primary charts)
- Two-thirds: 8 columns
- Half width: 6 columns

### Color Theme

What it is: Overall color scheme for the chart

Available themes: Blue, Green, Purple, Orange, Red, Gray

Note: Individual line colors override the theme

### Show Legend

Options: On/Off (default: On)

What it shows: Legend below chart identifying each line by color and label

When to disable: Single-line charts where the title is sufficient

### Chart Height

Range: 200-1000 pixels

Default: 450px

Recommendations:

- Dashboard charts: 350-450px
- Detailed analysis charts: 500-600px
- Presentation charts: 400-500px

#### Advanced Settings

### Enable Real-Time Data

When enabled: Chart auto-refreshes every 30 seconds with latest data

Use for: Live monitoring dashboards, today's performance tracking

#### Visual Examples

### Single Line Chart

    	Daily Revenue Trend
    │
    │     ╱‾╲
    │    ╱   ╲   ╱‾╲
    │   ╱     ╲ ╱   ╲
    │  ╱       ╲╱     ╲
    │ ╱
    └─────────────────────
     Mon Tue Wed Thu Fri

#### Multi-Line Comparison

    	Revenue vs Profit

      ──── Revenue (blue)
      - - - Profit (green)

    │ ────╱‾╲
    │    ╱   ╲╲
    │  - - ╲╲ ╱ ╲
    │      ╲╲╱   ╲
    │       ╲─
    └───────────────────

### Example Configurations

#### Example 1: Revenue Trend (Single Line)

    	Title: Daily Revenue
    Data Type: Data by Date
    Metrics:
      - Total Revenue (blue)
    Date Format: Auto
    Show Legend: Off
    Height: 400px
    Width: 12 columns

Use for: Simple revenue trending over time

#### Example 2: Profit vs Revenue Comparison

    	Title: Revenue & Profit Trend
    Data Type: Data by Date
    Metrics:
      - Total Revenue (blue)
      - Gross Profit (purple)
      - Net Profit (green)
    Date Format: Day
    Show Legend: On
    Height: 450px

Use for: Understanding profit margin trends alongside revenue growth

#### Example 3: Multi-Platform Ad Spend

    	Title: Ad Spend by Platform
    Data Type: Data by Date
    Metrics:
      - Facebook Ad Spend (blue)
      - Google Ad Spend (red)
      - Total Ad Spend (purple)
    Date Format: Auto
    Show Legend: On

#### Example 4: Customer Acquisition

    	Title: Customer Growth
    Data Type: Data by Date
    Metrics:
      - New Customers (green)
      - Returning Customers (blue)
      - Total Customer Count (purple)
    Date Format: Month
    Height: 500px

### Best Practices

### Number of Lines

- 1 line: Clean, easy to read, focused
- 2-3 lines: Good for comparisons, still readable
- 4-5 lines: Maximum recommended, can get cluttered
- 6+ lines: Avoid - too busy, hard to distinguish

### Line Color Selection

- Use contrasting colors for easy distinction
- Consistent color meanings:
  - Blue: Revenue, primary metrics
  - Green: Profit, growth, positive
  - Red: Costs, expenses, negative
  - Purple: Secondary metrics
- Keep same metric same color across all reports

### Date Format Selection

For 1-7 days: Use Daily (or Auto)

For 8-90 days: Use Daily (or Auto)

For 3-12 months: Use Weekly or Monthly (or Auto)

For 1+ years: Use Monthly or Quarterly (or Auto)

#### Chart Sizing

- Primary chart: Full width (12 columns)
- Secondary charts: Half width (6 columns)
- Ensure sufficient height for readability (400px minimum)

### Common Use Cases

#### Sales Trend Dashboard

Display daily sales performance:

- Single line: Total Revenue
- Daily granularity
- Last 30 days
- Full width

### Profit Margin Analysis

Track profitability over time:

- Two lines: Gross Margin %, Net Margin %
- Monthly granularity
- Last 12 months
- Shows if margins improving/declining

### Marketing Performance

Compare ad platforms:

- Three lines: Facebook ROAS, Google ROAS, Overall ROAS
- Daily granularity
- Last 60 days
- Identify which platform performs better over time

#### Seasonal Pattern Analysis

Understand yearly patterns:

- Single line: Monthly Revenue
- Monthly granularity
- Last 2-3 years
- Spot seasonal peaks and valleys

### Interpreting Line Charts

#### Upward Trend

Line moving up over time = growth/increase

Good for: Revenue, Profit, Customer Count

Action: Identify what's working, replicate success

### Downward Trend

Line moving down over time = decline/decrease

Concerning for: Revenue, Profit, Conversion Rate

Good for: Costs (lower is better)

Action: Investigate cause, take corrective action

### Flat/Stable Trend

Line staying relatively level

Interpretation:

- Revenue flat: Growth stalled, need new strategies
- Profit flat: Stable business, but not growing
- Costs flat: Good cost control

### Spikes and Dips

Sudden sharp changes

Causes:

- Sales events (Black Friday spike)
- Marketing campaigns
- Seasonal factors
- Data anomalies or errors

Action: Click the spike point to see that day's details

### Comparing Multiple Lines

Lines converging: Metrics becoming more similar

Lines diverging: Metrics moving apart

Example: Revenue growing but profit flat = costs increasing, margins compressing

#### Troubleshooting

### Issue: Chart is blank or shows "No Data"

Check:

- Date range includes orders/data
- Metric is available for selected data type
- Filters aren't excluding all data

### Issue: Lines are overlapping and hard to read

Solutions:

- Reduce number of lines (remove less important metrics)
- Increase chart height
- Use more contrasting colors
- Create separate charts for different metric groups

#### Issue: Too many data points (cluttered X-axis)

Solutions:

- Change date format to higher granularity (Daily → Weekly → Monthly)
- Reduce date range
- Increase chart width

### Issue: Unexpected trend

Verify:

- Correct metric is selected
- Date range is as expected
- No filters distorting data
- Check individual data points by hovering

### Related Widgets

- Bar Chart Widget - Category comparisons
- Metric Card Widget - Single value display
- Data Table Widget - Detailed data