Decomponent
Decomponent
Open main menu
✉️ hello@decomponent.com
Subscribe now
Start here 😆
Guides 📚
Area Chart
Audio
Bar Chart
Code Highlight
Donut Chart
Line Chart
PDFs
Pie Chart
Typewriter Effect
Email Archive
View Past Emails
Resources
SVG Blobs
SVG Text Highlight
Other Resources
Colors
Design Systems
Icons
Illustrations
Mockups
Photos
Typography
Guides
Area Charts
This is the simplest way to add an Area Chart to your app
Why use an Area chart?
It is the easiest way for users to visualise time-based data and analyse trends across time.
Recommended Package:
@tremor/react
How to use?
Follow the documentation
here
depending on which React framework you are using
Copy & modify the cope snippets below
Plain Area Chart
Include Details
Utilities over time (USD)
Stacked Area
Utilities over time (USD)
Slow Animation
(try refreshing the page)
Utilities over time (USD)
Alternatives
Recharts
React-Chartjs-2
Nivo
Note:
Tremor is the perfect library in 80% of the use cases where you just need something simple to show your users. If you need something with tons of flexibility, I recommend Recharts.