Preview

Installation

npx sigma-ui@latest add chart-line

Setup

Charts need the Unovis color variables from the Charts installation.

Usage

<script setup lang="ts">
import { LineChart } from '@/components/ui/chart-line';

const data = [
  { name: 'Jan', total: 1200, predicted: 900 },
  { name: 'Feb', total: 1600, predicted: 1100 },
];
</script>

<template>
  <LineChart
    :data="data"
    index="name"
    :categories="['total', 'predicted']"
  />
</template>

index is the property used for the x axis. categories lists the series to plot.

Examples

Sparkline

Hide the axes, grid, and legend to render a sparkline.

Custom tooltip

Pass a component to customTooltip. It receives title and data. See the Charts page for the prop shape.

API Reference

LineChart

Props

Prop	Type	Default
datarequired The source data, in which each entry is a dictionary.	T[]	-
categoriesrequired Select the categories from your data. Used to populate the legend and toolip.	Extract<keyof T, string>[]	-
indexrequired Sets the key to map the data to the axis.	Extract<keyof T, string>	-
colors Change the default colors.	string[]	-
config Config-driven series colors. Keys match category names and set --color-<key> and --chart-N.	ChartConfig	-
margin Margin of each the container	Spacing	{ top: 0, bottom: 0, left: 0, right: 0 }
filterOpacity Change the opacity of the non-selected field	number	0.2
xFormatter Function to format X label	((tick: number | Date, i: number, ticks: number[] | Date[]) => string)	-
yFormatter Function to format Y label	((tick: number | Date, i: number, ticks: number[] | Date[]) => string)	-
showXAxis Controls the visibility of the X axis.	boolean	true
showYAxis Controls the visibility of the Y axis.	boolean	true
showTooltip Controls the visibility of tooltip.	boolean	true
showLegend Controls the visibility of legend.	boolean	true
showGridLine Controls the visibility of gridline.	boolean	true
customTooltip Render custom tooltip component.	Component	-
curveType Type of curve	CurveType	CurveType.MonotoneX

Events

Event	Payload
legendItemClick Emitted when a legend item is clicked, with the item and its index.	[d: BulletLegendItemInterface, i: number]

Slots

Slot	Scope
default The content of the component.	-

Accessibility

The chart is an SVG graphic. Hovering a point shows a tooltip. Give the surrounding section a heading or caption that states what the chart measures, and provide the same numbers in a table when the exact values matter.

Key	Description
Tab	Moves focus past the chart. Points are not individually focusable.