Line

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 },
    ],
  },
};

Type options - All line chart options
Axes - Customize axes
Reference lines - Add trendlines and goal lines

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

When to use

Basic example

Multiple series

​When to use

​Basic example

​Multiple series

​Related

When to use

Basic example

Multiple series

Related