Appearance

On this page

Charts > Area Chart ​

An area chart visually represents quantitative data over a continuous interval, showcasing the magnitude of values as they change over time or categories by filling the space between a line and the axis with color.

The Chart ​

Other compatible charts

Download example CSV
Copy HTML

Playground ​

Data

Number of stacked layers

Animation

Duration of animation in ms

Style

Colors for areas
Color of border between areas
Stroke width of line between areas

Usage Example (with tooltip) ​

vue
<template>
  <AreaChart :data="data" @hover="setTooltip" />

  <OTTooltip :info="tooltip">
    <div v-if="tooltip?.data?.values">
      <p
        class="m-0"
        v-for="item in Object.keys(tooltip.data.values)"
        :key="item"
      >
        <span class="font-medium">
          {{ tooltip.data.values[item]?.name }}:
        </span>
        {{ tooltip.data.values[item]?.value }}
      </p>
    </div>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API ​

The area chart is built using SVG and d3. You can use it as a regular or stacked area chart. The area shapes animate using d3 transition.

Data ​

js
[
      {
        id: "data-1",
        name: "2017",
        values: {
          val1: { id: "val1", name: "Val 1", value: 20 },
          val2: { id: "val2", name: "Val 2", value: 10 },
        },
      },
      {
        id: "data-2",
        name:"2018",
        values: {
          val1: { id: "val1", name: "Val 1", value: 100 },
          val2: { id: "val2", name: "Val 2", value: 50 },
        },
      },
  ...
    ];

INFO

Optional: color

Props ​

NameDefaultTypeDescription
data[]ArrayThe dataset
margin{ top: 2, right: 20, bottom: 20, left: 40 }ObjectThe margins to use on each side in px
xScaleTypescaleTimeStringThe type of scale for x axis
yScaleTypescaleLinearStringThe type of scale for y axis
tickFormatX(d) => d3.timeFormat('%Y')(d)FunctionThe format function for x axis labels
tickFormatY(d) => dFunctionThe format function for y axis labels
color{ val1: '#ccc', val2: '#bbb' }ObjectThe color for each area
strokeColor#fffStringThe color for the border between areas
strokeWidth1NumberThe width of the border between areas
duration500NumberThe time of the animation in ms

Events ​

EventArgumentDescription
@hover{ target, data }Emitted the chart is hovered

Dependencies ​

  • d3