Area Chart

Area (filled) chart for visualizing cumulative or stacked trends.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/charts

Examples

⁽⁶⁾

Properties

⁽⁷⁹⁾

Playground

Simple random data area chart with title.

Loading demo…

import
 
{
 
AreaChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 WEEKLY_SIGNUPS 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<AreaChart
      
title
=
"Weekly signups"
      
subtitle
=
"Organic vs virality"
      
height
=
{
240
}
      
data
=
{
WEEKLY_SIGNUPS
}
      
xAxis
=
{
{
        show
:
 
true
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
`Week ${value + 1}`
,
      
}
}
      
yAxis
=
{
{
        show
:
 
true
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
`${value} users`
,
      
}
}
      
grid
=
{
{
 show
:
 
true
,
 style
:
 
'dashed'
 
}
}
      
tooltip
=
{
{
 show
:
 
true
 
}
}
      enableCrosshair
      liveTooltip
    
/>
  
)
;
}

Loading demo…

import
 
{
 
AreaChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 INVENTORY_SERIES
,
 formatMonth 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<AreaChart
      
title
=
"Inventory Levels by Warehouse"
      
subtitle
=
"Safety stock adjustments across the first half"
      
height
=
{
420
}
      
series
=
{
INVENTORY_SERIES
}
      
smooth
=
{
false
}
      
grid
=
{
{
 show
:
 
true
,
 style
:
 
'solid'
 
}
}
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'bottom'
,
 align
:
 
'center'
 
}
}
      
tooltip
=
{
{
        show
:
 
true
,
        formatter
:
 
(
point
)
 
=>
 
{
          
const
 label 
=
 
formatMonth
(
Math
.
round
(
point
.
x
)
)
;
          
return
 
`${label} • ${point.data?.warehouse ?? 'Warehouse'}: ${Math.round(point.y)}k units`
;
        
}
,
      
}
}
      
xAxis
=
{
{
        show
:
 
true
,
        title
:
 
'2025 timeline'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
formatMonth
(
Math
.
round
(
value
)
)
,
      
}
}
      
yAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Inventory on hand (thousands)'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
`${Math.round(value)}k`
,
      
}
}
      enableCrosshair
      liveTooltip
    
/>
  
)
;
}

Loading demo…

import
 
{
 
AreaChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 PHASE_LABELS
,
 SESSION_SERIES 
}
 
from
 
'./data'
;
 
const
 formatPhase 
=
 
(
index
:
 
number
)
 
=>
 PHASE_LABELS
[
index
]
 
??
 
`Week ${index + 1}`
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<AreaChart
      
title
=
"Active Sessions During Launch"
      
subtitle
=
"Layered by device platform"
      
height
=
{
420
}
      
series
=
{
SESSION_SERIES
}
      smooth
      
grid
=
{
{
 show
:
 
true
,
 style
:
 
'solid'
 
}
}
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'bottom'
,
 align
:
 
'center'
 
}
}
      enableSeriesToggle
      
tooltip
=
{
{
        show
:
 
true
,
        formatter
:
 
(
point
)
 
=>
 
{
          
const
 label 
=
 
formatPhase
(
Math
.
round
(
point
.
x
)
)
;
          
const
 channel 
=
 point
.
data
?
.
label 
??
 
'Sessions'
;
          
return
 
`${label} • ${channel}: ${Math.round(point.y)}k`
;
        
}
,
      
}
}
      
xAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Launch timeline'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
formatPhase
(
Math
.
round
(
value
)
)
,
      
}
}
      
yAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Daily sessions (thousands)'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
`${Math.round(value)}k`
,
      
}
}
      enableCrosshair
      liveTooltip
    
/>
  
)
;
}

Stacks monthly solar, wind, and hydro production to highlight how policy shifts increase clean generation share over the first half of 2025.

Loading demo…

import
 
{
 
AreaChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 MONTH_LABELS
,
 RENEWABLE_SERIES 
}
 
from
 
'./data'
;
 
const
 formatMonth 
=
 
(
index
:
 
number
)
 
=>
 MONTH_LABELS
[
index
]
 
??
 
`M${index + 1}`
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<AreaChart
      
layout
=
"stacked"
      
title
=
"Renewable Energy Generation"
      
subtitle
=
"Utility-scale output by source"
      
height
=
{
420
}
      
series
=
{
RENEWABLE_SERIES
}
      smooth
      
grid
=
{
{
 show
:
 
true
,
 style
:
 
'dashed'
 
}
}
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'bottom'
,
 align
:
 
'center'
 
}
}
      
xAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Month of 2025'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
formatMonth
(
Math
.
round
(
value
)
)
,
      
}
}
      
yAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Generation (GWh)'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
`${Math.round(value)} GWh`
,
      
}
}
      enableCrosshair
      liveTooltip
    
/>
  
)
;
}

Story focus

•

Tracks how a marketing push shifts audience attention across Originals, TV, film, and live sports week-by-week.

•

Highlights the share-based stack so teams can see when new content overtakes legacy catalog minutes.

•

Surfaces total minute contribution per category inside the tooltip for quick campaign readouts.

Key settings

•

Uses layout="stackedPercentage" to normalize each week to 100% share.

•

Keeps dashed gridlines and a centered legend for comparative scanning.

•

Custom tooltip blends absolute minutes with share-of-week for richer context.

Loading demo…

import
 
{
 
AreaChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 STREAMING_SERIES
,
 WEEK_TOTALS
,
 formatWeek 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<AreaChart
      
title
=
"Streaming Minutes During Campaign"
      
subtitle
=
"Share of viewing time by content category"
      
height
=
{
420
}
      
series
=
{
STREAMING_SERIES
}
      
layout
=
"stackedPercentage"
      
stackOrder
=
"normal"
      
areaOpacity
=
{
0.6
}
      smooth
      
grid
=
{
{
 show
:
 
true
,
 style
:
 
'dashed'
 
}
}
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'bottom'
,
 align
:
 
'center'
 
}
}
      
tooltip
=
{
{
        show
:
 
true
,
        formatter
:
 
(
point
)
 
=>
 
{
          
const
 index 
=
 
Math
.
round
(
point
.
x
)
;
          
const
 label 
=
 
formatWeek
(
index
)
;
          
const
 minutes 
=
 point
.
data
?
.
minutes 
??
 
0
;
          
const
 total 
=
 WEEK_TOTALS
[
index
]
 
??
 
0
;
          
const
 share 
=
 total 
>
 
0
 
?
 
(
minutes 
/
 total
)
 
*
 
100
 
:
 
0
;
          
return
 
`${label} • ${point.data?.category ?? 'Content'}: ${minutes}M min (${share.toFixed(1)}%)`
;
        
}
,
      
}
}
      
xAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Campaign cadence'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
formatWeek
(
Math
.
round
(
value
)
)
,
      
}
}
      
yAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Share of weekly minutes'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
`${Math.round(value * 100)}%`
,
      
}
}
      enableCrosshair
      liveTooltip
    
/>
  
)
;
}

Story focus

•

Demonstrates how stacked areas surface the composition of weekly ticket inflow by severity level.

•

Highlights declining critical volume while medium issues remain the majority of support demand.

•

Emphasizes stability gains after mid-quarter improvements.

Key settings

•

Uses the AreaChart layout="stacked" mode to visually sum severities per week.

•

Enables dashed grid lines and a bottom legend for quick reference.

•

Applies a week-aware xAxis.labelFormatter that translates series indices into friendly timeline labels.

Loading demo…

import
 
{
 
AreaChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 SEVERITY_SERIES
,
 
WEEKS
 
}
 
from
 
'./data'
;
 
const
 formatWeek 
=
 
(
index
:
 
number
)
 
=>
 
WEEKS
[
index
]
 
??
 
`Week ${index + 1}`
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<AreaChart
      
title
=
"Quarterly Support Ticket Mix"
      
subtitle
=
"Stacked by severity level"
      
height
=
{
420
}
      
series
=
{
SEVERITY_SERIES
}
      
layout
=
"stacked"
      smooth
      
grid
=
{
{
 show
:
 
true
,
 style
:
 
'dashed'
 
}
}
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'bottom'
,
 align
:
 
'center'
 
}
}
      
xAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Quarter timeline'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
formatWeek
(
Math
.
round
(
value
)
)
,
      
}
}
      
yAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Tickets created'
,
        labelFormatter
:
 
(
value
:
 
number
)
 
=>
 
`${Math.round(value)}`
,
      
}
}
      enableCrosshair
      liveTooltip
    
/>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/AreaChart

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap