Charts

Typlog UI charts combine Unovis rendering primitives with Typlog's theme, palette, tooltip, and legend components. Unovis remains responsible for scales, geometry, animation, and interaction; the chart package keeps presentation and series metadata consistent across a dashboard.

Install the chart entry and its optional peer dependencies:

pnpm add @typlog/ui @unovis/ts @unovis/vue

Import the chart stylesheet alongside the chart entry:

@import "@typlog/ui/charts";

Example ​

The following area chart shows the complete composition: ChartRoot provides configuration and theme colors, ChartAreaGradient supplies SVG definitions, and the Unovis container owns the chart geometry.

<script setup lang="ts">
import { ref } from 'vue'
import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
import {
  ChartAreaGradient,
  ChartCrosshair,
  ChartLegend,
  ChartRoot,
  ChartTooltip,
  type ChartConfig,
} from '@typlog/ui/charts'

interface Point {
  month: string
  visitors: number
  signups: number
}

const data = ref<Point[]>([
  { month: 'Jan', visitors: 320, signups: 120 },
  { month: 'Feb', visitors: 410, signups: 160 },
  { month: 'Mar', visitors: 380, signups: 145 },
  { month: 'Apr', visitors: 520, signups: 210 },
  { month: 'May', visitors: 610, signups: 260 },
  { month: 'Jun', visitors: 720, signups: 305 },
])
const config = {
  month: { label: 'Month', role: 'x' },
  visitors: { label: 'Visitors' },
  signups: { label: 'Signups' },
} satisfies ChartConfig
const x = (_d: Point, index: number) => index
const yArea = [(d: Point) => d.visitors, (d: Point) => d.signups]
const yLine = [(d: Point) => d.visitors, (d: Point) => d.visitors + d.signups]
const xTickFormat = (value: number) => data.value[value]?.month ?? ''
</script>

<template>
  <ChartRoot v-slot="{ mounted }" :config="config">
    <ChartAreaGradient v-slot="{ color, svgDefs }">
      <VisXYContainer v-if="mounted" :data="data" :height="260" :svg-defs="svgDefs">
        <VisArea :x="x" :y="yArea" :color="color" :opacity="0.4" />
        <VisLine :x="x" :y="yLine" :line-width="1" />
        <VisAxis
          type="x"
          :tick-format="xTickFormat"
          :tick-values="data.map((_item, index) => index)"
          :tick-line="false"
          :domain-line="false"
          :grid-line="false"
        />
        <VisAxis
          type="y"
          :tick-line="false"
          :domain-line="false"
          :grid-line="true"
        />
        <ChartTooltip />
        <ChartCrosshair />
      </VisXYContainer>
    </ChartAreaGradient>
    <ChartLegend class="mt-3" align="center" />
  </ChartRoot>
</template>

Composition ​

ChartRoot is the shared boundary for every example in this section. Its config maps data keys to labels, optional colors, and optional Iconify icons. Mark the domain field with role: 'x'; it is excluded from series colors and legends while becoming the default tooltip heading. Every other entry defaults to role: 'series'.

Place raw Unovis components inside ChartRoot:

• Use VisXYContainer for line, area, grouped bar, and stacked bar charts.
• Use VisSingleContainer for pie and donut charts.
• Add ChartTooltip and ChartCrosshair for XY hover interactions.
• Add ChartLegend when color needs a persistent text label.

The ChartRoot default slot exposes { mounted }. Render Unovis containers with v-if="mounted" so browser-only chart initialization does not run during SSR. Standard DOM and ARIA attributes such as role, aria-label, and aria-describedby are forwarded to the root primitive.

Colors and series order ​

Series use the Typlog chart palette unless their config entry supplies a color. Keep the order of ChartRoot.config aligned with accessor arrays passed to Unovis. The same order controls chart colors, tooltip rows, and legend entries.

Choose a guide ​

• Use Line for trends and change over a continuous domain.
• Use Area when magnitude or accumulation matters in addition to the trend.
• Use Bar for precise comparisons between categories or series.
• Use Pie and Donut for small part-to-whole summaries.
• Use Tooltip and Legend for presentation helpers.
• Use States for loading and empty dashboard panels.
• See API Reference for the complete Typlog wrapper props.