MiniChart

Tiny sparkline as bars or a line, without axes. The size prop (xs, sm, md, lg, xl) sets the chart height (an explicit height prop wins).

Jump to API reference

Import

Vue

import { UiMiniChart } from '@ziyarago/ui/vue'

Empty

Vue

<UiMiniChart :values="[]" />

Bars

Vue

<UiMiniChart
  :values="[12, 18, 9, 22, 30, 24, 36, 28, 40, 34, 46, 52]"
  :height="64"
  highlight-last
 />

Line

Vue

<UiMiniChart
  type="line"
  :values="[12, 18, 9, 22, 30, 24, 36, 28, 40, 34, 46, 52]"
  :height="64"
 />

Sizes

Vue

<UiMiniChart
  :values="[12, 18, 9, 22, 30, 24, 36, 28, 40, 34, 46, 52]"
  highlight-last
  size="xs"
 />

<UiMiniChart
  :values="[12, 18, 9, 22, 30, 24, 36, 28, 40, 34, 46, 52]"
  highlight-last
  size="sm"
 />

<UiMiniChart
  :values="[12, 18, 9, 22, 30, 24, 36, 28, 40, 34, 46, 52]"
  highlight-last
  size="md"
 />

<UiMiniChart
  :values="[12, 18, 9, 22, 30, 24, 36, 28, 40, 34, 46, 52]"
  highlight-last
  size="lg"
 />

<UiMiniChart
  :values="[12, 18, 9, 22, 30, 24, 36, 28, 40, 34, 46, 52]"
  highlight-last
  size="xl"
 />

API reference

Tiny sparkline in bar or line form for trends inside cards and tables.

Props

PropType and valuesDefaultDescription

valuesrequirednumber[][]Non-negative data points, scaled to the maximum value.

typebarline'bar'Bar columns or a single line.

highlightLastbooleanfalseBar type only: paints the last bar in the brand color.

heightnumber—Height in px. Overrides size when set.

sizexssmmdlgxl'md'Preset height: xs 28, sm 36, md 48, lg 64, xl 80 px.

Notes

The chart is decorative (no axes or values); pair it with a visible number.