Line Chart

Create single and multiple line visualizations in your Nuxt application.

The LineChart component provides a flexible and customizable way to visualize data trends over time or continuous values, supporting single and multiple line series with various curve interpolations.

Basic Usage

Line Chart

<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.TopRight"
    :hide-legend="false"
  />
</template>

Star

Multiple Lines

Line Chart

<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.TopRight"
    :hide-legend="false"
  />
</template>

Star

Single Line

Line Chart

<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.TopRight"
    :hide-legend="false"
    :y-grid-line="true"
  />
</template>

Star

Dash Array

Line Chart

<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.TopRight"
    :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>

Star

Props

Prop	Type	Default	Description
`data`	`T[]`	Required	Array of data points for the chart. Each element represents a data point.
`height`	`number`	Required	Height of the chart in pixels.
`xLabel`	`string`	`undefined`	Optional label for the x-axis.
`yLabel`	`string`	`undefined`	Optional label for the y-axis.
`padding`	`{ top: number; right: number; bottom: number; left: number; }`	`undefined`	Optional padding for the chart (top, right, bottom, left).
`categories`	`Record<string, BulletLegendItemInterface>`	Required	Series configuration: name and color for each data key.
`markerConfig`	`Record<string, MarkerConfig>`	`{}`	Marker configuration for each series.
`xFormatter`	`axisFormatter`	`undefined`	Formats X-axis labels. `(tick, i, ticks) => string` where tick can be a number or Date.
`yFormatter`	`axisFormatter`	`undefined`	Formats Y-axis labels. `(tick, i, ticks) => string` where tick can be a number or Date.
`curveType`	`CurveType`	`undefined`	Type of curve interpolation (see Curve Types section).
`lineWidth`	`number`	`2`	Width of the line in pixels.
`lineDashArray`	`number[][]`	`undefined`	SVG stroke-dasharray for dashed lines.
`xNumTicks`	`number`	`undefined`	Desired number of ticks on the x-axis.
`xExplicitTicks`	`(number	string	Date)`
`minMaxTicksOnly`	`boolean`	`false`	If true, only show first and last ticks on the x-axis.
`yNumTicks`	`number`	`undefined`	Desired number of ticks on the y-axis.
`hideLegend`	`boolean`	`false`	If true, hides the chart legend.
`hideTooltip`	`boolean`	`false`	If true, hides the chart tooltip.
`legendPosition`	`LegendPosition`	`undefined`	Position of the legend (see LegendPosition).
`legendStyle`	`string \| Record<string, string>`	`undefined`	Custom CSS style for the legend container.
`xDomainLine`	`boolean`	`false`	Show domain (axis) line on the x-axis.
`yDomainLine`	`boolean`	`false`	Show domain (axis) line on the y-axis.
`xTickLine`	`boolean`	`false`	Show tick lines on the x-axis.
`yTickLine`	`boolean`	`false`	Show tick lines on the y-axis.
`xGridLine`	`boolean`	`false`	Show grid lines on the x-axis.
`yGridLine`	`boolean`	`false`	Show grid lines on the y-axis.
`hideXAxis`	`boolean`	`false`	If true, hides the x-axis.
`hideYAxis`	`boolean`	`false`	If true, hides the y-axis.
`xAxisConfig`	`AxisConfig`	`undefined`	Axis configuration for customizing the appearance of the x-axis.
`yAxisConfig`	`AxisConfig`	`undefined`	Axis configuration for customizing the appearance of the y-axis.
`crosshairConfig`	`CrosshairConfig`	`undefined`	Crosshair configuration for customizing the crosshair line.
`yDomain`	`[number \| undefined, number \| undefined]`	`undefined`	Domain for the y-axis.
`xDomain`	`[number \| undefined, number \| undefined]`	`undefined`	Domain for the x-axis.

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
}

Star

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
}

Star

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)
Star

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.