Area Chart
To create an area chart in vue3-charts you can use the Area
layer. You can add the Area
layer multiple times or combine it with other layers (Line
, Bar
, Marker
).
If you have multiple Area
layers you can render them as stacked.
Let's see a simple example using an Area
layer and a Line
layer.
Chart
Code
Data
As you can see the area fill
color can be a gradient.
<defs> <linearGradient id="grad" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#be90ff" stop-opacity="1" /> <stop offset="100%" stop-color="white" stop-opacity="0.4" /> </linearGradient> </defs>
Stacked Area Chart
If you have multiple Area
layers you can render them as stacked using Group
component.
Chart
Code
Data
Area Props
The area layer allows a number of properties to be specified.
Name
Type
Description
areaStyle
Object
Use areaStyle to set svg styling for each bar.
Ex:
- fill (ex. red)
- fill-opacity
- etc...
dataKeys
Array
What data the bar to render.
Ex:
['name', 'pl']
type
normal
step
natural
monotone
Set how to draw the line.