Area Chart

Area charts are similar to line charts but with the area below the line filled in, making them ideal for showing volume or cumulative data.

Usage

To visualize data with an area chart, use type: 'area'. Like line charts, area charts require both --start and --size:

Basic Area Chart
Jan
Feb
Mar
Apr
May

Chart({ type: 'area', labels: true, primaryAxis: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Jan'),
            Chart.Data({ start: 0.2, value: 0.4 })
        ),
        Chart.Row({},
            Chart.Label({}, 'Feb'),
            Chart.Data({ start: 0.4, value: 0.6 })
        ),
        Chart.Row({},
            Chart.Label({}, 'Mar'),
            Chart.Data({ start: 0.6, value: 0.5 })
        ),
        // ... more rows
    )
)

Multiple Datasets

Create layered areas with multiple datasets:

Stacked Areas
Q1
Q2
Q3
Q4

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

Axes and Grid

Add grid lines with primaryAxis and secondaryAxis:

With Grid Lines
1
2
3
4
5

Chart({ 
    type: 'area', 
    labels: true, 
    primaryAxis: true, 
    secondaryAxis: 'show-4-secondary-axes'
},
    Chart.Body({}, /* rows */)
)

Area Styling

Customize area appearance with CSS custom properties:

Custom Colored Area
Mon
Tue
Wed
Thu
Fri

Chart({ 
    type: 'area', 
    labels: true,
    style: '--color: rgba(116, 128, 255, 0.6);'
},
    Chart.Body({},
        // Data rows...
    )
)

Orientation

Reverse the chart with reverse: true:

Normal

A
B
C

Reversed

A
B
C

← Line Chart Pie Chart →