Skip to main content
Line charts display data as a series of points connected by straight or curved lines. They’re ideal for showing trends and changes over time.

​
When to use

  • Time series data - Track changes over time periods
  • Trends - Show upward or downward patterns
  • Continuous measurements - Display data with no gaps
  • Multiple series comparison - Compare several trends on the same chart

​
Basic example

const config: GraphConfig = {
  type: 'line',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'revenue', label: 'Revenue' }
    ],
    rows: [
      { month: 'Jan', revenue: 12000 },
      { month: 'Feb', revenue: 15000 },
      { month: 'Mar', revenue: 18000 },
      { month: 'Apr', revenue: 17000 },
      { month: 'May', revenue: 21000 }
    ]
  }
};

​
Multiple series

const config: GraphConfig = {
  type: 'line',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'revenue', label: 'Revenue' },
      { key: 'profit', label: 'Profit' }
    ],
    rows: [
      { month: 'Jan', revenue: 12000, profit: 3000 },
      { month: 'Feb', revenue: 15000, profit: 4500 },
      { month: 'Mar', revenue: 18000, profit: 5400 }
    ]
  }
};