Bar Chart

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

If you have multiple Bar layers you can render them stacked or side by side.

Let's see a simple example using two Bar layers and a Marker layer. You can change the chart direction to have a column chart

show_chart Chart
code Code
receipt_long Data
JanFebAprMarMayJunJul05001,0001,5002,0002,5003,000

Bar Props

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

Name
Type
Description
barStyle
Function
Object
Use barStyle to set svg styling for each bar.
Ex:
  • fill (ex. red)
  • fill-opacity
  • stroke
  • strokeWidth
maxWidth
Number
Max width for the bar.
dataKeys
Array
What data the bar to render.
Ex: ['name', 'pl']