Line Chart

To create a line chart in vue3-charts you can use the Line layer. You can add the Line layer multiple times or combine it with other layers (Bar, Area).

Here you can see a simple example using two Line layers.

show_chart Chart
code Code
receipt_long Data
Jan😜AprMarMayJunJul05001,0001,5002,0002,5003,000

Line Props

The line layer allows a number of properties to be specified.

Name
Type
Description
lineStyle
Object
Use lineStyle to set svg styling for the line.
Ex:
  • stroke (ex. red)
  • strokeWidth
  • strokeLinecap
  • strokeDasharray
dotStyle
Object
Same as lineStyle but applyes to line dot.
dataKeys
Array
What data the line to render.
Ex: ['name', 'pl']
type
normal
step
natural
monotone
Set how to draw the line.