Area Chart

Learn how to implement and customize Area Charts in your Nuxt application.

Basic Usage

<script lang="ts" setup>
interface AreaChartItem {
  date: string
  desktop: number
  mobile: number
}

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

const AreaChartData: AreaChartItem[] = [
  { date: '2024-04-01', desktop: 222, mobile: 150 },
  { date: '2024-04-02', desktop: 180, mobile: 97 },
  { date: '2024-04-03', desktop: 167, mobile: 120 },
  { date: '2024-04-04', desktop: 260, mobile: 240 },
  { date: '2024-04-05', desktop: 240, mobile: 290 },
]

const xFormatter = (tick: number): string => {
  return `${AreaChartData[tick]?.date}`
}
</script>

<template>
  <AreaChart
    :data="AreaChartData"
    :height="300"
    :categories="categories"
    :y-grid-line="true"
    :x-formatter="xFormatter"
    :curve-type="CurveType.MonotoneX"
    :legend-position="LegendPosition.Top"
    :hide-legend="false"
  />
</template>

Basic Single Line

<script lang="ts" setup>
const categories: Record<string, BulletLegendItemInterface> = {
  revenue: { name: 'Revenue', color: '#22c55e' },
}

interface AreaChartItem {
  date: string
  revenue: number
}

const AreaChartData: AreaChartItem[] = [
  { date: 'Jan 23', revenue: 2340 },
  { date: 'Feb 23', revenue: 2550 },
  { date: 'Mar 23', revenue: 2730 },
  { date: 'Apr 23', revenue: 2950 },
  { date: 'May 23', revenue: 3120 },
  { date: 'Jun 23', revenue: 3300 },
  { date: 'Jul 23', revenue: 3500 },
  { date: 'Aug 23', revenue: 3700 },
  { date: 'Sep 23', revenue: 3900 },
  { date: 'Oct 23', revenue: 3800 },
  { date: 'Nov 23', revenue: 3300 },
  { date: 'Dec 23', revenue: 2000 },
]

const xFormatter = (i: number): string | number => `${AreaChartData[i]?.date}`
</script>

<template>
  <AreaChart
    :height="260"
    y-label="Revenue"
    x-label="Month"
    :categories="categories"
    :y-num-ticks="4"
    :x-num-ticks="7"
    :y-grid-line="true"
    :legend-position="LegendPosition.Top"
    :hide-legend="false"
    :x-formatter="xFormatter"
  />
</template>

Basic Area Chart

<script lang="ts" setup>
import { useResponsiveHeight } from '~/composables/useResponsiveHeight'

interface AreaChartItem {
  month: string
  desktop: number
}

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

const AreaChartData: AreaChartItem[] = [
  { month: 'January', desktop: 186 },
  { month: 'February', desktop: 305 },
  { month: 'March', desktop: 237 },
  { month: 'April', desktop: 73 },
  { month: 'May', desktop: 209 },
  { month: 'June', desktop: 214 },
]

const xFormatter = (tick: number, i?: number, ticks?: number[]): string => {
  if (typeof tick === 'number' && AreaChartData[tick]?.month) {
    return AreaChartData[tick].month
  }
  return String(tick)
}

const { height } = useResponsiveHeight({
  default: 180,
  sm: 220,
  md: 260,
  lg: 300,
  xl: 340,
})
</script>

<template>
  <AreaChart
    :data="AreaChartData"
    :height="height"
    y-label="Value"
    x-label="Month"
    :categories="categories"
    :y-num-ticks="4"
    :x-num-ticks="7"
    :y-grid-line="true"
    :legend-position="LegendPosition.Top"
    :hide-legend="false"
    :marker-config="{
      desktop: {
        type: 'circle',
        size: 6,
        strokeWidth: 2,
        color: '#3b82f6',
      },
    }"
    :x-formatter="xFormatter"
  />
</template>

<style scoped>
/* Stroke maps to color key in categories */
/* The color should match the color defined in categories */
.markers:deep(*[stroke='#3b82f6']) {
  marker: url('#circle-marker-desktop');
}
</style>

Step Area Chart

<script lang="ts" setup>
interface AreaChartItem {
  month: string
  desktop: number
}

const AreaChartData: AreaChartItem[] = [
  { month: 'January', desktop: 186 },
  { month: 'February', desktop: 305 },
  { month: 'March', desktop: 237 },
  { month: 'April', desktop: 73 },
  { month: 'May', desktop: 209 },
  { month: 'June', desktop: 214 },
]
const categories: Record<string, BulletLegendItemInterface> = {
  desktop: { name: 'Desktop', color: '#3b82f6' },
}

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

<template>
  <AreaChart
    :data="AreaChartData"
    :height="300"
    x-label="Month"
    y-label="Score"
    :categories="categories"
    :y-num-ticks="4"
    :x-num-ticks="7"
    :y-grid-line="true"
    :legend-position="LegendPosition.Top"
    :hide-legend="false"
    :x-formatter="xFormatter"
    :curve-type="CurveType.Step"
  />
</template>

Props

Prop	Type	Default	Description
`data`	`AreaChartData[]`	`[]`	Array of data points for the chart.
`categories`	`Record<string, AreaCategory>`	`{}`	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.
`fill-opacity`	`number`	`0.3`	Opacity of the area fill.
`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: AreaChartData, 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 AreaChartData {
  [key: string]: string | number
}

Categories Format

Categories define the visual appearance and metadata for each area:

types.ts

interface AreaCategory {
  name: string
  color: string
}

interface AreaCategories {
  [key: string]: AreaCategory
}

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)

Stacked Areas

To create stacked area charts, simply include multiple data series in your categories:

stacked-area.vue

<script setup lang="ts">
const data = [
  { month: 'Jan', desktop: 100, mobile: 80, tablet: 40 },
  { month: 'Feb', desktop: 120, mobile: 90, tablet: 50 },
  { month: 'Mar', desktop: 180, mobile: 110, tablet: 60 },
]

const categories = {
  desktop: { name: 'Desktop', color: '#3b82f6' },
  mobile: { name: 'Mobile', color: '#10b981' },
  tablet: { name: 'Tablet', color: '#f59e0b' },
}
</script>

<template>
  <AreaChart
    :data="data"
    :categories="categories"
    :height="300"
  />
  
</template>

CLI

How to install and use the Nuxt Charts CLI for chart management.

Bar Chart

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