Skip to main content

AreaChart

The AreaChart 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

data
Query | array
required
Query result or array of objects containing the data to visualize
x
string
required
Column name for the x-axis values
y
string
required
Column name for the y-axis values
series
string
Column name to group data into multiple series

Area Style Props

type
string
default:"stacked"
Area layout type: ‘stacked’ | ‘stacked100’
fillColor
string
Fill color for the area (hex, rgb, or theme color name)
fillOpacity
number
Opacity of the area fill (0-1)
line
boolean
Show line at the top edge of the area
lineColor
string
Color for the line overlay

Formatting Props

xFmt
string
Format string for x-axis values
yFmt
string
Format string for y-axis values

Chart Layout Props

title
string
Chart title displayed at the top
subtitle
string
Chart subtitle displayed below the title
legend
boolean
Whether to show the legend
chartAreaHeight
number
Height of the chart area in pixels

Axis Props

xAxisTitle
string | boolean
Title for x-axis. Use true to use column name
yAxisTitle
string | boolean
Title for y-axis. Use true to use column name
xGridlines
boolean
Show vertical gridlines
yGridlines
boolean
Show horizontal gridlines
xAxisLabels
boolean
Show labels on x-axis
yAxisLabels
boolean
Show labels on y-axis
xBaseline
boolean
Show x-axis baseline
yBaseline
boolean
Show y-axis baseline
xTickMarks
boolean
Show tick marks on x-axis
yTickMarks
boolean
Show tick marks on y-axis

Axis Scale Props

xType
string
Type of x-axis: ‘category’ | ‘time’ | ‘value’
yLog
boolean
Use logarithmic scale for y-axis
yLogBase
number
Base for logarithmic y-axis
yMin
number
Minimum value for y-axis
yMax
number
Maximum value for y-axis
yScale
boolean
Auto-scale y-axis to data range

Marker Props

markers
boolean
Show markers at data points
markerShape
string
Shape of markers: ‘circle’ | ‘square’ | ‘triangle’ | ‘diamond’
markerSize
number
Size of markers in pixels

Line Behavior Props

handleMissing
string
How to handle missing data: ‘gap’ | ‘connect’ | ‘zero’
step
boolean
Use step line instead of smooth line
stepPosition
string
Position of step: ‘start’ | ‘middle’ | ‘end’

Label Props

labels
boolean
Show data labels on the area
labelSize
number
Font size for labels
labelPosition
string
Position of labels: ‘top’ | ‘inside’
labelColor
string
Color for labels
labelFmt
string
Format string for labels
showAllLabels
boolean
Show labels for all data points

Series Props

colorPalette
string | array
default:"default"
Color palette name or array of colors
seriesColors
object
Object mapping series names to colors
seriesOrder
array
Array specifying the order of series
seriesLabelFmt
string
Format string for series labels

Behavior Props

sort
boolean
Sort data by x-axis values
connectGroup
string
Connect charts for synchronized interactions

Advanced Props

echartsOptions
object
Custom ECharts configuration object
seriesOptions
object
Custom series configuration
printEchartsConfig
boolean
default:false
Print ECharts config to console
renderer
string
Renderer type: ‘canvas’ | ‘svg’
downloadableData
boolean
Enable data download
downloadableImage
boolean
Enable image download
emptySet
string
Empty data behavior: ‘pass’ | ‘warn’ | ‘error’
emptyMessage
string
Custom empty data message
leftPadding
number
Left padding for chart area
rightPadding
number
Right padding for chart area
xLabelWrap
boolean
Wrap x-axis labels

Examples

Basic Area Chart

```sql revenue_over_time
select date_trunc('month', order_date) as month, sum(sales) as revenue
from orders
group by 1
order by 1

### Stacked Area Chart

```markdown
```sql revenue_by_category
select 
  date_trunc('month', order_date) as month,
  category,
  sum(sales) as revenue
from orders
group by 1, 2

### 100% Stacked Area Chart

```markdown
<AreaChart 
  data={revenue_by_category} 
  x="month" 
  y="revenue" 
  series="category"
  type="stacked100"
  title="Revenue Distribution"
  yFmt="pct"
/>

Area Chart with Line Overlay

<AreaChart 
  data={revenue_over_time} 
  x="month" 
  y="revenue"
  line="true"
  fillOpacity=0.3
  yFmt="usd"
/>

Custom Colors and Styling

<AreaChart 
  data={revenue_by_category} 
  x="month" 
  y="revenue" 
  series="category"
  colorPalette={['#4F46E5', '#7C3AED', '#DB2777']}
  fillOpacity=0.6
  markers="true"
  yGridlines="true"
/>

Step Area Chart

<AreaChart 
  data={inventory_levels} 
  x="date" 
  y="quantity"
  step="true"
  stepPosition="end"
  title="Inventory Levels"
/>

Build docs developers (and LLMs) love