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
Chart
Code
Data
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']