Preview

Installation

npx sigma-ui@latest add chart-bar

Setup

Charts need the Unovis color variables from the Charts installation.

Usage

<script setup lang="ts">
import { BarChart } from '@/components/ui/chart-bar';

const data = [
  { name: 'Jan', total: 1200 },
  { name: 'Feb', total: 1600 },
];
</script>

<template>
  <BarChart
    :data="data"
    index="name"
    :categories="['total']"
  />
</template>

Set type to stacked to stack the series. roundedCorners rounds the bar corners, in pixels.

Examples

Stacked

Rounded

Custom tooltip

Pass a component to customTooltip. It receives title and data. See the Charts page for the prop shape.

API Reference

BarChart

Props

Prop	Type	Default
datarequired The source data, in which each entry is a dictionary.	T[]	-
categoriesrequired Select the categories from your data. Used to populate the legend and toolip.	Extract<keyof T, string>[]	-
indexrequired Sets the key to map the data to the axis.	Extract<keyof T, string>	-
colors Change the default colors.	string[]	-
config Config-driven series colors. Keys match category names and set --color-<key> and --chart-N.	ChartConfig	-
margin Margin of each the container	Spacing	{ top: 0, bottom: 0, left: 0, right: 0 }
filterOpacity Change the opacity of the non-selected field	number	0.2
xFormatter Function to format X label	((tick: number | Date, i: number, ticks: number[] | Date[]) => string)	-
yFormatter Function to format Y label	((tick: number | Date, i: number, ticks: number[] | Date[]) => string)	-
showXAxis Controls the visibility of the X axis.	boolean	true
showYAxis Controls the visibility of the Y axis.	boolean	true
showTooltip Controls the visibility of tooltip.	boolean	true
showLegend Controls the visibility of legend.	boolean	true
showGridLine Controls the visibility of gridline.	boolean	true
customTooltip Render custom tooltip component.	Component	-
type Change the type of the chart	"stacked" | "grouped"	"grouped"
roundedCorners Rounded bar corners	number	0

Events

Event	Payload
legendItemClick Emitted when a legend item is clicked, with the item and its index.	[d: BulletLegendItemInterface, i: number]

Slots

Slot	Scope
default The content of the component.	-

Accessibility

The chart is an SVG graphic. Hovering a bar shows a tooltip. Give the surrounding section a heading or caption that states what the chart measures, and provide the same numbers in a table when the exact values matter.

Key	Description
Tab	Moves focus past the chart. Bars are not individually focusable.