Area Chart

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

The AreaChart component provides a flexible and customizable way to visualize time series or categorical data as filled line charts.

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>

Star

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>

Star

Basic Area Chart

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>

Star

Step Area Chart

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)

Star

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>

Star

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.