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