Area

Alpha

An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.

Component Source

Installation ​

Run the following command ​

pnpm dlx shadcn-vue@latest add chart-area

Setup ​

Follow the guide to complete the setup.

API ​

Prop

data
Record<string, any>[]Required*

The source data, in which each entry is a dictionary.

categories
string[]Required*

Select the categories from your data. Used to populate the legend and tooltip.

index
stringRequired*

Sets the key to map the data to the axis.

colors
string[]

Change the default colors.

margin
Spacing

Margin of each the container

filterOpacity
number

Change the opacity of the non-selected field

xFormatter
((tick: number | Date, i: number, ticks: number[] | Date[]) => string)

Function to format X label

yFormatter
((tick: number | Date, i: number, ticks: number[] | Date[]) => string)

Function to format Y label

showXAxis
boolean

Controls the visibility of the X axis.

showYAxis
boolean

Controls the visibility of the Y axis.

showTooltip
boolean

Controls the visibility of tooltip.

showLegend
boolean

Controls the visibility of legend.

showGridLine
boolean

Controls the visibility of gridline.

customTooltip
Component

Render custom tooltip component.

curveType
CurveType

Type of curve

showGradient
boolean

Controls the visibility of gradient.

Emit

legendItemClick
[d: BulletLegendItemInterface, i: number]

Example ​

Sparkline ​

We can turn the chart into sparkline chart by hiding axis, gridline and legends.

Custom Tooltip ​

If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition here.

Edit this page on GitHub