Area Chart

Key Features

Multi-Series Support

Display multiple data series with stacked or non-stacked configurations

Custom Value Axis Scaling

Set custom vartical axis scaling with defined min and max values

Gradient Fills

Customizable opacity for visually appealing area fills

Adjustable Line Width

Customize the thickness of the line for better visualization.

Curve Tension Control

Modify the curve smoothness for aesthetic or data-fitting preferences.

Point Size Adjustment

Set the size of data points to emphasize key values.

Customizable Zoom

Enables zoom tools, mouse scroll zooming, and adjustable zoom sensitivity for precise data navigation.

Value Formatting (K/M/B/T)

Shortens large numbers for clarity (e.g., 125000 → 125K)

Perfect For

Website Traffic

Track visitor volume by source over time

Revenue Tracking

Visualize cumulative revenue or financial growth

Resource Usage

Monitor system metrics like CPU or memory usage

Portfolio Growth

Show investment or asset value changes over time

Cumulative Growth

Visualize overall accumulation of values, ideal for area charts

Configuration Options

Option	Type	Default	Description
design	string	default	Chart design preset ('default', 'modern', 'minimalistic', 'cyberpunk', 'professional', 'custom')
background	string	transparent	Background color or gradient when design is `custom` (e.g., '#hex', 'transparent', 'linear-gradient(...)')
textColor	string	#111827	Text color when design is `custom` (e.g., '#hex')
gridColor	string	#E5E7EB	Grid line color when design is `custom` (e.g., '#hex')
borderColor	string	#D1D5DB	Border color when design is `custom` (e.g., '#hex')
borderRadius	number	8	Border radius in pixels when design is `custom` (0-20)
shadowBlur	number	10	Shadow blur radius in pixels when design is `custom` (0-30)
shadowOffset	number	2	Shadow offset in pixels when design is `custom` (0-10)
fontSize	number	12	Font size in pixels when design is `custom` (8-18)
fontFamily	string	Inter, system-ui, sans-serif	Font family when design is `custom` (e.g., 'Inter, system-ui, sans-serif')
fontWeight	string	normal	Font weight when design is `custom` ('normal', '500', '600', 'bold')

customColor	boolean	false	Enable custom colors for data series (specified in data objects)
fillOpacity	number	0.3	Opacity of the filled area (0.1-1.0)
lineWidth	number	2	Thickness of the area border line in pixels (1-6)
pointRadius	number	4	Radius of data points in pixels (0-8)
tension	number	0.4	Curve smoothness for area lines (0 = sharp, 1 = very smooth)
multiSeries	boolean	false	Enable multiple data series areas
showGrid	boolean	true	Show background grid lines
showLabels	boolean	true	Show x-axis labels
showLegend	boolean	true	Show legend for multi-series charts
showTooltip	boolean	true	Enables tooltips on hover, providing detailed data information. When enabled, also supports advanced tooltip behavior if `showAdvancedTooltip` is true.
showAdvancedTooltip	boolean	false	Enables advanced tooltip mode, snapping to the nearest labeled point or candle based on x-axis proximity when true. Requires `showTooltip` to be true for functionality.
showPoints	boolean	true	Show data points on the area border
showValues	boolean	false	Show values above data points
animations	boolean	true	Enable drawing animations.
animationDuration	number	2000	Animation duration in milliseconds (500–5000). Specifies the time in milliseconds over which the animation will be executed. Ignored when `animations` is set to `false`.
glowEffect	boolean	false	Enable glow effect on area lines and points
useKFormat	boolean	false	Enable K/M/B/T formatting for y-axis and point values (e.g., 1000 as 1.0K, 1000000 as 1.0M)
valuePrefix	string	''	Prefix for y-axis and point values (e.g., '$')
valueAfterfix	string	''	Suffix for y-axis and point values (e.g., ' USD')
showZoom	boolean	false	Enables zooming functionality, allowing users to zoom in on a specific range of data points using mouse scroll or touch gestures. When enabled, also shows zoom controls if `showZoomTool` is true.
showZoomTool	boolean	false	Displays an interactive zoom tool (a draggable range selector) on the chart when `showZoom` is true. Automatically disabled if `showZoom` is false.
zoomRangeStart	number	0	Sets the starting index of the zoom range (e.g., 0 for the first data point). Must be between 0 and the total number of data points minus 1, and less than or equal to `zoomRangeEnd`. Only effective when `showZoom` is true.
zoomRangeEnd	number	totalPoints	Sets the ending index of the zoom range (e.g., 6 for the last of 7 data points). Must be between 0 and the total number of data points minus 1, and greater than or equal to `zoomRangeStart`. Only effective when `showZoom` is true.
scrollSpeedMultiplier	number	1.0	Adjusts the sensitivity of mouse scroll or touch gesture zooming. Values between 0.02 (slower) and 0.2 (faster) control how quickly the zoom range changes. Only effective when `showZoom` is true.
moveSpeedMultiplier	number	1.00	Controls the speed of movement in the chart. The default is 1.0. Lower values result in slower movement, while higher values make the movement faster.
pinchZoomSensitivity	number	0.05	Controls the responsiveness of pinch-to-zoom gestures on touch devices. Recommended values range from 0.01 (very smooth and slow) to 0.1 (faster and more sensitive). Only effective when `showZoom` is true.

Example line chart with large dataset

Data Format

Single Series

areaChart.setData({
                    name: 'Website Traffic',
                    data: [
                        { x: 'Jan', y: 15000 },
                        { x: 'Feb', y: 30000 },
                        { x: 'Mar', y: 20000 },
                        { x: 'Apr', y: 40000 },
                        { x: 'May', y: 25000 },
                        { x: 'Jun', y: 35000 },
                        { x: 'Jul', y: 30000 },
                        { x: 'Aug', y: 45000 }
                    ],
                    color: '#14B8A6',
                    fillColor: '#14B8A6'
                });

Multi-Series

areaChart.setData([
                    {
                        name: 'Direct Traffic',
                        data: [
                            { x: 'Jan', y: 5000 },
                            { x: 'Feb', y: 8000 },
                            { x: 'Mar', y: 6000 },
                            { x: 'Apr', y: 12000 },
                            { x: 'May', y: 9000 },
                            { x: 'Jun', y: 11000 },
                            { x: 'Jul', y: 10000 }
                        ],
                        color: '#14B8A6',
                        fillColor: '#14B8A6'
                    },
                    {
                        name: 'Organic Search',
                        data: [
                            { x: 'Jan', y: 7000 },
                            { x: 'Feb', y: 15000 },
                            { x: 'Mar', y: 10000 },
                            { x: 'Apr', y: 20000 },
                            { x: 'May', y: 12000 },
                            { x: 'Jun', y: 18000 },
                            { x: 'Jul', y: 15000 }
                        ],
                        color: '#06B6D4',
                        fillColor: '#06B6D4'
                    },
                    {
                        name: 'Social Media',
                        data: [
                            { x: 'Jan', y: 3000 },
                            { x: 'Feb', y: 7000 },
                            { x: 'Mar', y: 4000 },
                            { x: 'Apr', y: 8000 },
                            { x: 'May', y: 4000 },
                            { x: 'Jun', y: 6000 },
                            { x: 'Jul', y: 5000 }
                        ],
                        color: '#8B5CF6',
                        fillColor: '#8B5CF6'
                    }
                ]);

Data Structure

Use data for values or an array of {x, y} objects for labeled points. Set multiSeries: true for multiple series. Include color for line color and fillColor for area fill color.

ChartForge