AreaChart
TheAreaChart component visualizes data as filled areas, making it ideal for showing cumulative values, trends, and proportions. It supports stacked and 100% stacked layouts with optional line overlays.
Props
Data Props
Query result or array of objects containing the data to visualize
Column name for the x-axis values
Column name for the y-axis values
Column name to group data into multiple series
Area Style Props
Area layout type: ‘stacked’ | ‘stacked100’
Fill color for the area (hex, rgb, or theme color name)
Opacity of the area fill (0-1)
Show line at the top edge of the area
Color for the line overlay
Formatting Props
Format string for x-axis values
Format string for y-axis values
Chart Layout Props
Chart title displayed at the top
Chart subtitle displayed below the title
Whether to show the legend
Height of the chart area in pixels
Axis Props
Title for x-axis. Use
true to use column nameTitle for y-axis. Use
true to use column nameShow vertical gridlines
Show horizontal gridlines
Show labels on x-axis
Show labels on y-axis
Show x-axis baseline
Show y-axis baseline
Show tick marks on x-axis
Show tick marks on y-axis
Axis Scale Props
Type of x-axis: ‘category’ | ‘time’ | ‘value’
Use logarithmic scale for y-axis
Base for logarithmic y-axis
Minimum value for y-axis
Maximum value for y-axis
Auto-scale y-axis to data range
Marker Props
Show markers at data points
Shape of markers: ‘circle’ | ‘square’ | ‘triangle’ | ‘diamond’
Size of markers in pixels
Line Behavior Props
How to handle missing data: ‘gap’ | ‘connect’ | ‘zero’
Use step line instead of smooth line
Position of step: ‘start’ | ‘middle’ | ‘end’
Label Props
Show data labels on the area
Font size for labels
Position of labels: ‘top’ | ‘inside’
Color for labels
Format string for labels
Show labels for all data points
Series Props
Color palette name or array of colors
Object mapping series names to colors
Array specifying the order of series
Format string for series labels
Behavior Props
Sort data by x-axis values
Connect charts for synchronized interactions
Advanced Props
Custom ECharts configuration object
Custom series configuration
Print ECharts config to console
Renderer type: ‘canvas’ | ‘svg’
Enable data download
Enable image download
Empty data behavior: ‘pass’ | ‘warn’ | ‘error’
Custom empty data message
Left padding for chart area
Right padding for chart area
Wrap x-axis labels