YouTipHighcharts Area Charts
## Highcharts Area Charts
An **Area Chart** is a powerful data visualization tool that is closely related to line charts. In an area chart, the space between the plot line and the axis is filled with color, gradient, or texture. This visual fill emphasizes the volume or magnitude of change over time, making it easier to compare trends across multiple data series.
This comprehensive tutorial covers the core concepts, configuration options, and practical implementations of various Highcharts Area Chart types.
---
## Core Configuration & Syntax
To create an area chart in Highcharts, you primarily set the `type` property inside the `chart` configuration object to `'area'`.
```javascript
Highcharts.chart('container', {
chart: {
type: 'area' // Defines the chart type as an Area Chart
},
title: {
text: 'Area Chart Title'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
plotOptions: {
area: {
// Configure area-specific options here
fillOpacity: 0.5,
marker: {
enabled: false
}
}
},
series: [{
name: 'Fruit Consumption',
data: [5, 7, 3]
}]
});
```
### Key Plot Options for Area Charts
Under `plotOptions.area` (or `plotOptions.areaspline`), you can customize the appearance of your area charts:
* **`fillColor`**: Sets the color of the area fill. It accepts solid hex/RGB colors, RGBA colors for transparency, or gradients.
* **`fillOpacity`**: Controls the transparency of the area fill (ranging from `0` to `1`). This is crucial when overlapping multiple series.
* **`lineColor`**: Defines the color of the boundary line.
* **`lineWidth`**: Sets the thickness of the boundary line.
* **`threshold`**: Defines the Y-value that serves as the base for the area fill (defaults to `0`).
---
## Area Chart Variations
Highcharts supports several specialized area chart types to suit different data visualization needs. Below is an overview of the primary variations:
| No. | Chart Type | Description |
| :--- | :--- | :--- |
| 1 | **Basic Area Chart** | A standard area chart displaying one or more overlapping series. |
| 2 | **Area Chart with Negative Values** | Visualizes data that drops below zero, with the fill extending down to the negative axis. |
| 3 | **Stacked Area Chart** | Series are stacked on top of each other to show cumulative totals. |
| 4 | **Percentage Area Chart** | Stacks series and scales them to represent a 100% total, showing relative proportions. |
| 5 | **Area Chart with Missing Data** | Handles null or missing data points gracefully by breaking the area or connecting across the gap. |
| 6 | **Inverted Area Chart** | Swaps the X and Y axes, displaying the area vertically. |
| 7 | **Spline Area Chart** | Uses smooth, curved lines (splines) instead of straight line segments. |
| 8 | **Area Range Chart** | Displays a range with a high and low value for each X-value (requires `highcharts-more.js`). |
| 9 | **Area Range and Line Chart** | Combines an area range with a standard line chart to show averages alongside ranges. |
---
## Code Examples
### 1. Basic Area Chart
This example demonstrates a standard area chart with semi-transparent fills so that overlapping series remain visible.
```javascript
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'US and USSR Nuclear Stockpiles'
},
xAxis: {
allowDecimals: false,
accessibility: {
rangeDescription: 'Range: 1940 to 2010.'
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
}
},
tooltip: {
pointFormat: '{series.name} held {point.y:,.0f} warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [null, null, 1, 6, 35, 80, 135, 350, 1000, 2000, 4000, 8000, 12000, 15000, 18000, 20000, 22000, 24000, 26000, 28000, 30000, 31200, 31100, 30500, 29000, 27000, 25000, 24000, 23000, 22000, 21000, 20000, 19000, 18000, 17000, 16000, 15500, 15000, 14500, 14000, 13500, 13000, 12500, 12000, 11500, 11000, 10500, 10000, 9500, 9000, 8500, 8000, 7500, 7000, 6500, 6000, 5500, 5000, 4500, 4000, 3500, 3000, 2500, 2000, 1500, 1000]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null, 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4233, 5221, 6129, 7088, 8149, 9186, 10228, 11100, 12100, 13000, 14000, 15000, 16000, 17000, 18000, 19000, 20000, 21000, 22000, 23000, 24000, 25000, 26000, 27000, 28000, 29000, 30000, 31000, 32000, 33000, 34000, 35000, 36000, 37000, 38000, 39000, 40000, 41000, 42000, 43000, 44000, 45000, 40000]
}]
});
```
### 2. Stacked Area Chart
To stack series on top of each other, set `stacking` to `'normal'` inside `plotOptions.area`.
```javascript
plotOptions: {
area: {
stacking: 'normal', // Enables cumulative stacking
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
}
```
### 3. Percentage Area Chart
To display relative proportions that sum up to 100%, set `stacking` to `'percent'`.
```javascript
plotOptions: {
area: {
stacking: 'percent', // Scales series to total 100%
lineColor: '#ffffff',
lineWidth: 1,
marker: {
enabled: false
}
}
}
```
### 4. Spline Area Chart
To create smooth, organic curves instead of jagged lines, use the `'areaspline'` chart type.
```javascript
chart: {
type: 'areaspline' // Renders smooth curves
}
```
---
## Best Practices & Considerations
1. **Use Transparency (`fillOpacity`)**: When plotting multiple overlapping series in a basic area chart, always set a `fillOpacity` (typically between `0.3` and `0.6`). Otherwise, the series in the foreground will completely block the series in the background.
2. **Limit the Number of Series**: Overlapping area charts can quickly become cluttered and unreadable if you have more than 3 or 4 series. If you have many series, consider using a **Stacked Area Chart** or a **Line Chart** instead.
3. **Handle Missing Data Gracefully**: By default, Highcharts leaves a gap in the area if a data point is `null`. If you want the chart to connect the remaining points continuously, set `connectNulls: true` in your plot options.
4. **Area Range Dependencies**: To use `arearange` or `areasplinerange` charts, you must include the Highcharts advanced features module (`highcharts-more.js`) in your project:
```html
```