Area Chart

[Configuration Manual]

Introduction

Area charts visually display quantitative data. It is based on line charts. Areas between the axis and the line are often emphasized with colors, textures, and shading lines. Typically, an area chart compares two or more quantities. Area charts are suitable for illustrating the trend changes of one or more groups of data under continuous independent variables, as well as comparing them with each other, while also being able to observe the changing trend of the total data.

In VChart, you can use the area chart configuration to display the changing trends of both data components and total data simultaneously. As shown below, this example shows the trend of sales of different cosmetics:

In the area chart example shown above, you need to use the following key configurations:

• seriesField attribute is used to declare the field participating in color mapping
• stack attribute is declared as true for configuring stacking, which will be stacked according to the field declared in the seriesField attribute

Chart Composition

The area chart is composed of point elements, line elements, axes, and other components.

Point elements and line elements are essential for area charts, and relevant drawing configurations are indispensable:

• areaChart.type: Chart type, the type of area chart is 'area'
• areaChart.data: Data source for chart rendering
• areaChart.xField: Continuous time interval or ordered category field, mapping element's x-coordinate
• areaChart.yField: Numerical field, mapping element's y-coordinate

Axes, tooltips, and other auxiliary chart display components are optional configurations with default effects and functionalities:

• areaChart.axes: Axis components, automatically displayed and inferred according to chart type with coordinate system and data mapping logic, for detailed configuration see VChart Axis Component Configuration
• areaChart.tooltip: Tooltip information, displayed interactively by default, for detailed configuration see VChart Tooltip Configuration
• For more component configurations see VChart areaChart configuration

Quick Start

Key Configuration

• type: Chart type, the type of area chart is 'area'
• xField attribute is declared as a continuous time interval or an ordered category field
• yField attribute is declared as a numerical field

Area Chart Features

Data

• A discrete or sequential field, such as: month
  (Sequential field data only supports timestamp format, and needs to be configured with axes.type: 'time' in the axis)
• A numerical field, such as: temperature

A set of month and temperature data is defined as follows:

data: [
  {
    name: 'area',
    values: [
      {
        month: 'January',
        temperature: 8
      },
      {
        month: 'February',
        temperature: 9
      },
      {
        month: 'March',
        temperature: 11
      },
      {
        month: 'April',
        temperature: 14
      }
    ]
  }
];

Chart Layout

Stacked Area Chart

Similar to stacked bar charts, stacked area charts not only show the differences between different categories within the same dimension but also show the differences in the total amount of different categories within the same dimension. In VChart, if you need to display a stacked area chart, you need to configure areaChart.stack: true, and in order to distinguish the areas stacked together within the same dimension, you need to specify the areaChart.seriedField field, which defaults to mapping the area color

Percentage Stacked Area Chart

In the percentage stacked area chart, the height of each stacked segment only represents its proportion of the total height, not the actual value. This makes it easier for users to compare the relative weight and trend changes of each subcategory or category within the overall data. In VChart, if you want to display a percentage stacked area chart, you need to configure areaChart.stack: true and areaChart.percent: true. And you also need to specify the areaChart.seriedField field, which defaults to mapping the area color.

Elements and Styles

Smooth Area Chart

Configure the curveType: 'monotone' attribute in the line.style property, and the style.curveType attribute of the default area element will automatically synchronize, so there is no need to configure it again

Step Area Chart

Configure the curveType: 'step' | 'stepAfter' | 'stepBefore' attribute in the line.style property