Installation

Only works with Vue >3.3

Run the following command

npx shadcn-vue@latest add chart-bar

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.

type

'stacked' | 'grouped'

Change the type of the chart

roundedCorners

number

Rounded bar corners

Emit

legendItemClick

[d: BulletLegendItemInterface, i: number]

Example

Stacked

You can stack the bar chart by settings prop type to stacked.

Rounded

Custom Tooltip

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