Line Chart

Line charts display data as points connected by lines, ideal for showing trends over time.

Usage

To visualize data with a line chart, use type: 'line'. Line charts require both --start and --size to draw the line between points:

Basic Line Chart
Jan	40%
Feb	60%
Mar	50%
Apr	80%
May	70%

Chart({ type: 'line', labels: true, primaryAxis: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Jan'),
            Chart.Data({ start: 0.2, value: 0.4 }, $('span', { class: 'data' }, '40%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Feb'),
            Chart.Data({ start: 0.4, value: 0.6 }, $('span', { class: 'data' }, '60%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Mar'),
            Chart.Data({ start: 0.6, value: 0.5 }, $('span', { class: 'data' }, '50%'))
        ),
        // ... more rows
    )
)

Multiple Datasets

Add multiple lines by using multiple Chart.Data elements with multiple: true:

Multi-Line Chart
Q1
Q2
Q3
Q4

Chart({ type: 'line', multiple: true, labels: true, primaryAxis: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Q1'),
            Chart.Data({ start: 0.2, value: 0.4 }),
            Chart.Data({ start: 0.3, value: 0.5 }),
            Chart.Data({ start: 0.1, value: 0.3 })
        ),
        // ... more rows
    )
)

Axes and Grid

Add grid lines with secondaryAxis:

With 10 Grid Lines
1
2
3
4
5
6

Chart({ type: 'line', labels: true, primaryAxis: true, secondaryAxis: true },
    Chart.Body({},
        // Data rows...
    )
)

// Or with custom number of grid lines:
Chart({ type: 'line', secondaryAxis: 'show-4-secondary-axes' }, ...)

Line Styling

Customize line appearance with CSS custom properties:

Styled Line (thicker, custom color)
Jan
Feb
Mar
Apr
May

Chart({ 
    type: 'line', 
    labels: true,
    style: '--color: #7480ff; --line-size: 3px;'
},
    Chart.Body({},
        // Data rows...
    )
)

Orientation

Reverse the chart with reverse: true:

Normal

A
B
C

Reversed

A
B
C

← Column Chart Area Chart →