Line

Alpha

A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.

Component Source

Installation ​

Run the following command ​

bash
npx shadcn-vue@latest add chart-line

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 toolip.

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

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