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.

show_chart Chart
code Code
receipt_long Data
Start ValueStop ValueJanFebAprMarMayJunJul05001,0001,5002,0002,5003,000

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.

show_chart Chart
code Code
receipt_long Data
JanFebAprMarMayJunJul01,0002,0003,0004,000

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.