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. It supports reactive data and TypeScript, making it ideal for interactive dashboards.

Basic Usage

<script lang="ts" setup>
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>
  <AreaChart
    :key="colorMode.value"
    :data="AreaChartData"
    :height="300"
    :categories="categories"
    :y-grid-line="true"
    :x-formatter="xFormatter"
    :curve-type="CurveType.MonotoneX"
    :legend-position="LegendPosition.BottomCenter"
    :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 = (tick: number, _i?: number, _ticks?: number[]): string => {
  return `${AreaChartData[tick]?.date ?? ''}`
}
</script>

<template>
  <AreaChart
    :data="AreaChartData"
    :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.TopRight"
    :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.TopRight"
    :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.TopRight"
    :hide-legend="false"
    :x-formatter="xFormatter"
    :curve-type="CurveType.Step"
  />
</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.
`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.

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. This approach makes it easy to visualize cumulative data trends in Vue and Nuxt applications:

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>

Vue Charts

Learn how to set up vue-chrts for not just Nuxt, but all Vue chart projects.

Bar Chart

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