Chart
Charting foundation built on unovis-vue. ChartContainer provides the theming, config context, tooltip wiring, and legend that every chart shares. For ready-made charts see Line, Area, Bar, Pie, and Semi Circle.
When to use?
Reach for the chart-type components (Line, Area, Bar, Pie) for everyday charts and the Semi Circle gauge for progress. Use these primitives directly only when you need a custom Unovis composition; ChartContainer still gives you the shared theming and tooltip/legend plumbing.
Anatomy
Import all parts and piece them together.
vue
<script setup>
import {
ChartContainer,
ChartCrosshair,
ChartLegendContent,
ChartTooltip,
VisArea,
VisAxis,
VisLine,
VisXYContainer,
} from "@/components/ui/chart";
</script>
<template>
<ChartContainer>
<VisXYContainer>
<VisArea />
<VisLine />
<VisAxis />
<ChartTooltip />
<ChartCrosshair />
</VisXYContainer>
<ChartLegendContent />
</ChartContainer>
</template>API Reference
Props, events, and slots for each sub-component.
ChartContainer
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| config | ChartConfig | — | Map of dataKey → { label, color, icon }. Drives theming and the legend. |
| cursor | boolean | false | Show the Unovis crosshair line. |
| class | string | — | Extra classes for the wrapping div. |
Slots
| Slot | Description |
|---|---|
| default | Scoped slot exposing { id, config } for the chart leaf components. |
ChartTooltipContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| config | ChartConfig | — | Theming map for tooltip swatches and labels. |
| indicator | "dot" | "line" | "dashed" | "dot" | Indicator style next to each value. |
| hideLabel | boolean | false | Hide the tooltip title row. |
| labelFormatter | (d) => string | — | Format the title (e.g. dates). |
ChartLegendContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| verticalAlign | "top" | "bottom" | "bottom" | Position relative to the chart. |
| hideIcon | boolean | false | Hide per-series icons from the config. |