Area Chart

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

The AreaChart component is a powerful addition to the Vue charts library, visualizing time series or categorical data as filled line charts. Examples ↗

Basic Usage

<script lang="ts" setup>
defineOptions({
  tags: ['areacharts', 'multiplelines']
})

withDefaults(
  defineProps<{
    showTitle?: boolean
  }>(),
  {
    showTitle: false
  }
)

const { height } = useResponsiveHeight({
  default: 200,
  sm: 300
})

const colorMode = useColorMode()

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: 75, mobile: 50 },
  { date: '2024-04-02', desktop: 125, mobile: 100 },
  { 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>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
    :class="showTitle ? 'p-6' : ''"
  >
    <div
      v-if="showTitle"
      class="flex items-center justify-between"
    >
      <h3 class="text-lg font-semibold">
        Area Chart
      </h3>
      <NuxtLink to="/blocks/area-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <AreaChart
      :key="colorMode.value"
      :data="AreaChartData"
      :height="height"
      :categories="categories"
      :y-grid-line="true"
      :x-formatter="xFormatter"
      :curve-type="CurveType.MonotoneX"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
    />
  </div>
</template>

Basic Single Line

<script lang="ts" setup>
defineOptions({
  tags: ['areacharts', 'singleline']
})

import { useResponsiveHeight } from '~/composables/useResponsiveHeight'

withDefaults(
  defineProps<{
    showTitle?: boolean
  }>(),
  {
    showTitle: false
  }
)

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 = (tick: number, _i?: number, _ticks?: number[]): string => {
  return `${AreaChartData[tick]?.date ?? ''}`
}

const { height } = useResponsiveHeight({
  default: 200,
  sm: 300
})
</script>

<template>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
    :class="showTitle ? 'p-6' : ''"
  >
    <div
      v-if="showTitle"
      class="flex items-center justify-between"
    >
      <h3 class="text-lg font-semibold">
        Area Chart
      </h3>
      <NuxtLink to="/blocks/area-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <AreaChart
      :data="AreaChartData"
      :height="height"
      y-label="Revenue"
      x-label="Month"
      :categories="categories"
      :y-num-ticks="4"
      :x-num-ticks="7"
      :y-grid-line="true"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
      :x-formatter="xFormatter"
    />
  </div>
</template>

Area Chart

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

defineOptions({
  tags: ['areacharts', 'basic']
})

withDefaults(
  defineProps<{
    showTitle?: boolean
  }>(),
  {
    showTitle: false
  }
)

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: 200,
  sm: 300
})
</script>

<template>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
    :class="showTitle ? 'p-6' : ''"
  >
    <div
      v-if="showTitle"
      class="flex items-center justify-between"
    >
      <h3 class="text-lg font-semibold">
        Area Chart
      </h3>
      <NuxtLink to="/blocks/area-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <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.TopRight"
      :hide-legend="false"
      :marker-config="{
        desktop: {
          type: 'circle',
          size: 6,
          strokeWidth: 2,
          color: '#3b82f6'
        }
      }"
      :x-formatter="xFormatter"
    />
  </div>
</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>
defineOptions({
  tags: ['areacharts', 'step']
})

const { height } = useResponsiveHeight({
  default: 200,
  sm: 300
})
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>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
  >
    <div class="flex items-center justify-between">
      <h3 class="text-lg font-semibold">
        Area Chart
      </h3>
      <NuxtLink to="/blocks/area-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <AreaChart
      :data="AreaChartData"
      :height="height"
      x-label="Month"
      y-label="Score"
      :categories="categories"
      :y-num-ticks="4"
      :x-num-ticks="7"
      :y-grid-line="true"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
      :x-formatter="xFormatter"
      :curve-type="CurveType.Step"
    />
  </div>
</template>

To create stacked area charts, simply include multiple data series in your categories and set the stacked prop to true. This approach makes it easy to visualize cumulative data trends in Vue and Nuxt applications:

<script lang="ts" setup>
defineOptions({
  tags: ['areacharts', 'stacked']
})

const colorMode = useColorMode()

interface StackedAreaItem {
  date: string
  saas: number
  marketplace: number
  services: number
}

const categories: ComputedRef<Record<string, BulletLegendItemInterface>>
  = computed(() => ({
    saas: {
      name: 'SaaS',
      color: '#3b82f6'
    },
    marketplace: {
      name: 'Marketplace',
      color: '#22c55e'
    },
    services: {
      name: 'Services',
      color: '#f59e0b'
    }
  }))

const stackedData: StackedAreaItem[] = [
  { date: 'Jan', saas: 4000, marketplace: 2400, services: 2400 },
  { date: 'Feb', saas: 3000, marketplace: 1398, services: 2210 },
  { date: 'Mar', saas: 2000, marketplace: 9800, services: 2290 },
  { date: 'Apr', saas: 2780, marketplace: 3908, services: 2000 },
  { date: 'May', saas: 1890, marketplace: 4800, services: 2181 },
  { date: 'Jun', saas: 2390, marketplace: 3800, services: 2500 },
  { date: 'Jul', saas: 3490, marketplace: 4300, services: 2100 }
]

const { height } = useResponsiveHeight({
  default: 250,
  sm: 350
})

const xFormatter = (i: number): string => `${stackedData[i]?.date}`
const yFormatter = (value: number): string => `$${value.toLocaleString()}`
</script>

<template>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
  >
    <div class="flex items-center justify-between">
      <h3 class="text-lg font-semibold">
        Area Chart
      </h3>
      <NuxtLink to="/blocks/area-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <AreaChart
      :key="colorMode.value"
      :data="stackedData"
      :height="height"
      :categories="categories"
      :stacked="true"
      :x-formatter="xFormatter"
      :y-formatter="yFormatter"
      :curve-type="CurveType.MonotoneX"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
      :y-grid-line="true"
      :x-grid-line="false"
    />
  </div>
</template>

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).
`hideArea`	`boolean`	`false`	If true, hides the area fill and shows only the line.
`stacked`	`boolean`	`false`	If true, the area chart will be stacked.
`gradientStops`	`Array<{ offset: string; stopOpacity: number }>`	`undefined`	Custom gradient stops for the area fill.
`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.
`crosshairConfig`	`CrosshairConfig`	`undefined`	Crosshair configuration for customizing the crosshair line.
`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.
`yDomain`	`[number \| undefined, number \| undefined]`	`undefined`	Domain for the y-axis.
`xDomain`	`[number \| undefined, number \| undefined]`	`undefined`	Domain for the x-axis.
`yExplicitTicks`	`(number \| string \| Date)[]`	`undefined`	Force specific ticks on the y-axis.
`xMinMaxTicksOnly`	`boolean`	`false`	If true, only show first and last ticks on the x-axis.
`yMinMaxTicksOnly`	`boolean`	`false`	If true, only show first and last ticks on the y-axis.
`minMaxTicksOnlyShowGridLines`	`boolean`	`false`	Show grid lines for min and max axis ticks.
`xMinMaxTicksOnlyShowGridLines`	`boolean`	`false`	Show grid lines for min and max x-axis ticks.
`yMinMaxTicksOnlyShowGridLines`	`boolean`	`false`	Show grid lines for min and max y-axis ticks.
`tooltipTitleFormatter`	`(data: T) => string \| number`	`undefined`	Custom formatter for tooltip titles.
`tooltip`	`TooltipConfig`	`undefined`	Tooltip configuration (hideDelay, showDelay, followCursor).
`duration`	`number`	`undefined`	Animation duration in milliseconds.
`stacked`	`boolean`	`false`	If true, creates a stacked area chart where areas stack on top of each other.

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)

Examples

Check out examples here ↗

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.

Area Chart

Basic Usage

Basic Single Line

Basic Area Chart

Area Chart

Step Area Chart

Stacked Area Chart

Props

Data Format

Categories Format

Curve Types

Examples