Chart type

Area

Line

Bar

Donut

Dependencies

Charts components is built on top of Unovis (a modular data visualization framework).

Installation

Requires Vue >= 3.3

Update css

Add the following tooltip styling to your tailwind.css file:

@layer base {
  :root {
    /* ... */
    --vis-tooltip-background-color: none !important;
    --vis-tooltip-border-color: none !important;
    --vis-tooltip-text-color: none !important;
    --vis-tooltip-shadow-color: none !important;
    --vis-tooltip-backdrop-filter: none !important;
    --vis-tooltip-padding: none !important;

    --vis-primary-color: var(--primary);
    /* change to any hsl value you want */
    --vis-secondary-color: 160 81% 40%;
    --vis-text-color: var(--muted-foreground);
  }

If you are not using css-variables for your component, you need to update the --vis-primary-color and --vis-text-color to your desired hsl values (use any "rgb to hsl" converter).

Be sure to provide dark mode styling as well.

Colors

By default, we construct the primary theme color, and secondary (--vis-secondary-color) color with different opacity for the graph.

However, you can always pass in the desired color into each chart.

<template>
  <AreaChart
    :data="data"
    :colors="['blue', 'pink', 'orange', 'red']"
  />
</template>

Custom tooltip

If you want to customize the Tooltip for the chart, you can pass customTooltip prop with a custom Vue component. The custom component would receive title and data props, check out ChartTooltip.vue component for example.

The expected prop definition would be:

defineProps<{
  title?: string;
  data: {
    name: string;
    color: string;
    value: unknown;
  }[];
}>();

API Reference

Parts shared by every chart:

ChartTooltip

Props

Prop	Type	Default
title Heading shown above the values.	string	-
datarequired Rows to list, each with a name, color swatch, and value.	{ name: string; color: string; value: any; }[]	-

ChartSingleTooltip

Props

Prop	Type	Default
selectorrequired CSS selector of the chart elements that show the tooltip on hover.	string	-
indexrequired Data key used as the tooltip title.	string	-
items Legend items used to look up the name and color of each value.	BulletLegendItemInterface[]	-
valueFormatter Formats each value before it is shown.	((tick: number, i?: number, ticks?: number[]) => string)	`${tick}`
customTooltip Component rendered instead of ChartTooltip; receives title and data props.	Component	-

ChartLegend

Props

Prop	Type	Default
itemsrequired Legend entries; inactive items are shown as filtered out.	BulletLegendItemInterface[]	[]

Events

Event	Payload
legendItemClick Emitted when a legend item is clicked, with the item and its index.	[d: BulletLegendItemInterface, i: number]
update:items Emitted with the new items after a click isolates one series or resets the filter.	[payload: BulletLegendItemInterface[]]

ChartCrosshair

Props

Prop	Type	Default
colorsrequired Crosshair point color for each series, in category order.	string[]	[]
indexrequired Data key used as the tooltip title.	string	-
itemsrequired Legend items used to look up the name and color of each value.	BulletLegendItemInterface[]	-
customTooltip Component rendered instead of ChartTooltip; receives title and data props.	Component	-

ChartContainer

Props

Prop	Type	Default
config	ChartConfig	{}
passthrough	boolean	false

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Charts are SVG graphics. Hovering a point or bar shows a tooltip, and a donut chart lists each slice in a legend. Give the surrounding section a heading or caption that states what the chart measures. Provide the same numbers in a table when the exact values matter, and do not rely on color alone to tell series apart.

Key	Description
Tab	Moves focus past the chart. Points, bars, and slices are not individually focusable.