Chart

Use chart to visualize series data with consistent theming across light and dark mode. Define a ChartConfig mapping each data key to a label and color, pass it to ChartContainer, and compose the actual marks with Unovis components (VisXYContainer, VisLine, VisGroupedBar, VisAxis, ...) inside it — ChartContainer only provides the theme CSS variables and shared layout, it doesn't render marks itself.

<script setup lang="ts">
import { VisAxis, VisLine, VisXYContainer } from "@unovis/vue";
import { ChartContainer, type ChartConfig } from "@/components/ui/chart";

const chartData = [
  { date: new Date("2024-01-01"), desktop: 186 },
  { date: new Date("2024-02-01"), desktop: 305 },
  { date: new Date("2024-03-01"), desktop: 237 },
];

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;
</script>

<template>
  <ChartContainer :config="chartConfig" class="min-h-50 w-full">
    <VisXYContainer :data="chartData">
      <VisLine :x="(d) => d.date" :y="(d) => d.desktop" :color="chartConfig.desktop.color" />
      <VisAxis type="x" :x="(d) => d.date" />
    </VisXYContainer>
  </ChartContainer>
</template>

Add ChartTooltipContent with VisTooltip/VisCrosshair (re-exported here as ChartTooltip/ ChartCrosshair) for hover tooltips, and ChartLegendContent below the container for a legend — utils.ts's componentToString renders ChartTooltipContent to HTML for use as a crosshair template, since Unovis tooltips expect a string, not a Vue component.

Installation

Usage