Line Chart

Create single and multiple line visualizations in your Nuxt application.

Basic Usage

<script lang="ts" setup>
const chartData = [
  {
    date: 'Jan 23',
    subscriptions: 2890,
    downloads: 2338,
  },
  {
    date: 'Feb 23',
    subscriptions: 2756,
    downloads: 2103,
  },
  {
    date: 'Mar 23',
    subscriptions: 3322,
    downloads: 2194,
  },
  {
    date: 'Apr 23',
    subscriptions: 3470,
    downloads: 2108,
  },
  {
    date: 'May 23',
    subscriptions: 3475,
    downloads: 1812,
  },
  {
    date: 'Jun 23',
    subscriptions: 3129,
    downloads: 1726,
  },
  {
    date: 'Jul 23',
    subscriptions: 3490,
    downloads: 1982,
  },
  {
    date: 'Aug 23',
    subscriptions: 2903,
    downloads: 2012,
  },
  {
    date: 'Sep 23',
    subscriptions: 2643,
    downloads: 2342,
  },
  {
    date: 'Oct 23',
    subscriptions: 2837,
    downloads: 2473,
  },
  {
    date: 'Nov 23',
    subscriptions: 2954,
    downloads: 3848,
  },
  {
    date: 'Dec 23',
    subscriptions: 3239,
    downloads: 3736,
  },
]

const categories: Record<string, BulletLegendItemInterface> = {
  subscriptions: { name: 'Subscriptions', color: '#3b82f6' },
  downloads: { name: 'Downloads', color: '#22c55e' },
}

const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
  return String(chartData[tick]?.date ?? '')
}
</script>

<template>
  <LineChart
    :data="chartData"
    :height="280"
    y-label="Sales"
    :x-num-ticks="4"
    :y-num-ticks="4"
    :categories="categories"
    :x-formatter="xFormatter"
    :y-grid-line="true"
    :curve-type="CurveType.Linear"
    :legend-position="LegendPosition.Top"
    :hide-legend="false"
  />
</template>

Multiple Lines

<script lang="ts" setup>
const chartData = [
  { month: 'January', desktop: 186, mobile: 186 },
  { month: 'February', desktop: 305, mobile: 305 },
  { month: 'March', desktop: 237, mobile: 237 },
  { month: 'April', desktop: 260, mobile: 209 },
  { month: 'May', desktop: 209, mobile: 209 },
  { month: 'June', desktop: 250, mobile: 214 },
]

const categories: Record<string, BulletLegendItemInterface> = {
  desktop: { name: 'Desktop', color: '#3b82f6' },
  mobile: { name: 'Mobile', color: '#22c55e' },
}

const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
  return chartData[tick]?.month ?? ''
}
</script>

<template>
  <LineChart
    :data="chartData"
    :height="300"
    y-label="Number of visits"
    :x-num-ticks="2"
    :categories="categories"
    :x-formatter="xFormatter"
    :y-grid-line="true"
    :curve-type="CurveType.MonotoneX"
    :legend-position="LegendPosition.Top"
    :hide-legend="false"
  />
</template>

Single Line

<script lang="ts" setup>
const chartData = [
  { month: 'January', desktop: 186 },
  { month: 'February', desktop: 305 },
  { month: 'March', desktop: 237 },
  { month: 'April', desktop: 260 },
  { month: 'May', desktop: 209 },
  { month: 'June', desktop: 250 },
]

const categories: Record<string, BulletLegendItemInterface> = {
  desktop: { name: 'Desktop', color: '#22c55e' },
}

const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
  return chartData[tick]?.month ?? ''
}
</script>

<template>
  <LineChart
    :data="chartData"
    :height="300"
    x-label="Time"
    y-label="Temperature"
    :categories="categories"
    :y-num-ticks="4"
    :x-num-ticks="7"
    :x-formatter="xFormatter"
    :curve-type="CurveType.Basis"
    :legend-position="LegendPosition.Top"
    :hide-legend="false"
    :y-grid-line="true"
  />
</template>

Dash Array

<script lang="ts" setup>
const chartData = [
  { month: 'January', desktop: 120 },
  { month: 'February', desktop: 185 },
  { month: 'March', desktop: 160 },
  { month: 'April', desktop: 220 },
  { month: 'May', desktop: 195 },
  { month: 'June', desktop: 270 },
]

const categories: Record<string, BulletLegendItemInterface> = {
  desktop: { name: 'Desktop', color: '#22c55e' },
}

const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
  return chartData[tick]?.month ?? ''
}
</script>

<template>
  <LineChart
    :data="chartData"
    :height="300"
    x-label="Time"
    y-label="Temperature"
    :categories="categories"
    :y-num-ticks="4"
    :x-num-ticks="7"
    :line-dash-array="[[5, 5]]"
    :x-formatter="xFormatter"
    :legend-position="LegendPosition.Top"
    :hide-legend="false"
    :y-grid-line="true"
    @click="(e, data) => console.log('Chart clicked', data)"
  >
    <template #tooltip="{ values }">
      <div>Custom tooltip: {{ values }}</div>
    </template>
  </LineChart>
</template>

Props

Prop	Type	Default	Description
`data`	`LineChartData[]`	`[]`	Array of data points for the chart.
`categories`	`Record<string, LineCategory>`	`{}`	Series configuration: name and color for each data key.
`height`	`number`	`300`	Height of the chart in pixels.
`x-formatter`	`(tick: number, i?: number, ticks?: number[]) => string`	-	Formats X-axis labels.
`y-formatter`	`(tick: number, i?: number, ticks?: number[]) => string`	-	Formats Y-axis labels.
`x-label`	`string`	-	Label for the X-axis.
`y-label`	`string`	-	Label for the Y-axis.
`x-num-ticks`	`number`	`5`	Number of ticks on X-axis.
`y-num-ticks`	`number`	`5`	Number of ticks on Y-axis.
`curve-type`	`CurveType`	`'linear'`	Type of curve interpolation.
`stroke-width`	`number`	`2`	Width of the line stroke.
`stroke-dasharray`	`string`	-	Dash pattern for the line.
`legend-position`	`LegendPosition`	`'none'`	Position of the legend.
`hide-legend`	`boolean`	`true`	Hide the chart legend.
`marker-config`	`Record<string, MarkerConfig>`	`{}`	Marker configuration for each series.
`show-tooltip`	`boolean`	`true`	Show tooltip on hover.
`tooltip-formatter`	`(data: LineChartData, key: string) => string`	-	Custom formatter for tooltip content.

Data Format

The data should be an array of objects where each object represents a data point:

types.ts

interface LineChartData {
  [key: string]: string | number
}

Categories Format

Categories define the visual appearance and metadata for each line:

types.ts

interface LineCategory {
  name: string
  color: string
}

interface LineCategories {
  [key: string]: LineCategory
}

Curve Types

Available curve types for area interpolation:

linear - Straight lines between points
linearClosed - Closed straight lines
basis - B-spline curves
basisClosed - Closed B-spline curves
basisOpen - Open B-spline curves
bundle - Bundle spline curves
cardinal - Cardinal spline curves
cardinalClosed - Closed cardinal spline curves
cardinalOpen - Open cardinal spline curves
catmullRom - Catmull-Rom spline curves
catmullRomClosed - Closed Catmull-Rom spline curves
catmullRomOpen - Open Catmull-Rom spline curves
monotoneX - Monotone cubic interpolation (X axis)
monotoneY - Monotone cubic interpolation (Y axis)
natural - Natural cubic spline
step - Step function
stepBefore - Step function (step before)
stepAfter - Step function (step after)

Bar Chart

Implement vertical, horizontal, grouped, and stacked bar charts in your Nuxt application.

Donut Chart

Implement circular data visualizations with the Donut Chart component.