Line Charts: Trends Over Time

Line charts reveal the story of change. They connect sequential data points to show trends, patterns, and fluctuations over time - essential for answering "How are things changing?"

When to Use Line Charts

Line charts excel at showing:

• Time-series data: Daily orders, monthly revenue, yearly growth
• Trends: Is the metric going up, down, or staying flat?
• Patterns: Weekly cycles, seasonal variations, anomalies
• Comparisons: How do multiple metrics move relative to each other?

They're NOT ideal for:

• Comparing unordered categories (use bar charts)
• Showing composition (use stacked area or pie charts)
• Spotting outliers in non-temporal data (use scatter plots)

Try It: Order Trend Analyzer

Analyze QuickBite's daily performance over time. Adjust the time range, toggle series visibility, and experiment with area fills:

Reading Line Chart Patterns

Learn to spot these common patterns in time-series data:

1. Trends

• Upward slope: Growth over time
• Downward slope: Decline
• Flat line: Stability (or stagnation)

2. Seasonality

• Weekly patterns: QuickBite sees weekend spikes
• Monthly patterns: End-of-month paycheck effect
• Yearly patterns: Holiday seasons, weather effects

3. Anomalies

• Sudden spikes: Marketing campaigns, viral moments
• Sudden drops: Technical issues, external events
• Outliers: Single unusual data points

Dual Y-Axes for Different Scales

When comparing metrics with different magnitudes (orders in hundreds vs revenue in thousands), use dual y-axes:

options: {
  scales: {
    y: {
      type: 'linear',
      position: 'left',
      title: { display: true, text: 'Orders' }
    },
    y1: {
      type: 'linear',
      position: 'right',
      title: { display: true, text: 'Revenue ($)' },
      grid: { drawOnChartArea: false } // Prevents overlapping grid
    }
  }
}

Line Chart Best Practices

1. Use Smooth Curves Thoughtfully

The tension property controls curve smoothing:

• 0: Straight lines between points (most accurate)
• 0.3-0.4: Gentle curves (good for trends)
• Higher values can misrepresent the actual data

2. Limit the Number of Lines

Too many lines create visual clutter. Consider:

• Maximum 4-5 series on one chart
• Use highlighting (thicker line) for the most important series
• Provide interactive toggles to show/hide series

3. Show Data Points Appropriately

• Few data points (7-14): Show point markers
• Many data points (30+): Hide or shrink markers

Code Example

Here's how to create a multi-series line chart:

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4', 'Jan 5'],
    datasets: [{
      label: 'Orders',
      data: [342, 298, 387, 412, 356],
      borderColor: '#2dd4bf',
      tension: 0.3,
      fill: false
    }, {
      label: 'New Customers',
      data: [45, 38, 52, 61, 48],
      borderColor: '#fbbf24',
      tension: 0.3,
      fill: false
    }]
  },
  options: {
    responsive: true,
    interaction: {
      intersect: false,
      mode: 'index' // Shows all series values on hover
    }
  }
});

Key Takeaways

• Line charts are perfect for time-series data where continuity matters
• Use dual y-axes when comparing metrics with different scales
• Look for trends, seasonality, and anomalies in the patterns
• Area fills can emphasize magnitude but may obscure overlapping series
• Keep it clean: limit to 4-5 series maximum

Next, we'll explore pie and doughnut charts for showing part-to-whole relationships.