Line Chart

Key Features

Customizable Design

Choose from default, modern, minimalistic, cyberpunk, professional themes, or use a custom theme with many configurable options for font, border, grid, text, and full custom color control.

Multi-Series Support

Display multiple data series with automatic legends

Custom Value Axis Scaling

Set custom vertical axis scaling with defined min and max values

Adjustable Line Width

Customize the thickness of the line for clearer visualization

Curve Tension Control

Modify the smoothness of line curves for aesthetic or accuracy preferences

Point Size Adjustment

Set the size of data points on the line for emphasis and clarity

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

Time Series Analysis

Track changes over time periods like sales, revenue, or user growth

Performance Metrics

Monitor KPIs, conversion rates, and business metrics

Stock Prices

Display financial data and market trends over time

Scientific Data

Visualize experimental results and research data

Trend Analysis

Highlight detailed changes and fluctuations, ideal for line 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)
lineWidth	number	3	Line thickness in pixels (1-8)
tension	number	0.5	Curve smoothness for lines (0 = straight, 1 = very curved)
pointRadius	number	4	Data point size in pixels (0-8)
showPoints	boolean	true	Show data points on the line
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.
showValues	boolean	false	Show values above data points
multiSeries	boolean	false	Enable multiple data series
animations	boolean	true	Enable drawing animations.
animationDuration	number	2000	Animation duration in milliseconds (500–5000). Controls the length of time the drawing animation takes to complete. This setting is ignored when `animations` is set to `false`.
glowEffect	boolean	false	Enable glow effect on 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	0.1	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

lineChart.setData({
                name: 'Monthly Revenue',
                data: [
                    { x: 'Jan', y: 20000 },
                    { x: 'Feb', y: 35000 },
                    { x: 'Mar', y: 25000 },
                    { x: 'Apr', y: 45000 },
                    { x: 'May', y: 30000 },
                    { x: 'Jun', y: 40000 },
                    { x: 'Jul', y: 35000 },
                    { x: 'Aug', y: 50000 }
                ],
                color: '#8B5CF6'
            });

Multi-Series

lineChart.setData([
                {
                    name: 'Desktop Users',
                    data: [
                        { x: 'Jan', y: 1200 },
                        { x: 'Feb', y: 1900 },
                        { x: 'Mar', y: 3000 },
                        { x: 'Apr', y: 5000 },
                        { x: 'May', y: 2000 },
                        { x: 'Jun', y: 3000 },
                        { x: 'Jul', y: 4500 }
                    ],
                    color: '#8B5CF6'
                },
                {
                    name: 'Mobile Users',
                    data: [
                        { x: 'Jan', y: 800 },
                        { x: 'Feb', y: 1500 },
                        { x: 'Mar', y: 2800 },
                        { x: 'Apr', y: 4200 },
                        { x: 'May', y: 3500 },
                        { x: 'Jun', y: 4800 },
                        { x: 'Jul', y: 6000 }
                    ],
                    color: '#EC4899'
                },
                {
                    name: 'Tablet Users',
                    data: [
                        { x: 'Jan', y: 300 },
                        { x: 'Feb', y: 500 },
                        { x: 'Mar', y: 800 },
                        { x: 'Apr', y: 1200 },
                        { x: 'May', y: 900 },
                        { x: 'Jun', y: 1100 },
                        { x: 'Jul', y: 1400 }
                    ],
                    color: '#10B981'
                }
            ]);

Data Structure

Use data for values or an array of {x, y} objects for labeled points. Set multiSeries: true for multiple series, ensuring consistent x values across series.

ChartForge