Range Area Chart

[Configuration Manual]

Introduction

The Range Area Chart (Range Area Chart) is a visual encoding graphic used to display the differences between different datasets. In the range area chart, you can clearly see the changes in the minimum value field and maximum value field between each dataset, as well as the gap between them. This type of chart is often used to display the fluctuation range, uncertainty, and trends of data. In VChart, you can easily configure and generate such charts.

Composition of the Chart

Similar to the area chart, the range area chart is composed of area chart elements, coordinate axes, and other components.

The rectangular chart element is the basic element of the range area chart, and related drawing configurations are essential:

• rangeAreaChart.type: Chart type, the type of bar / bar chart is 'rangeArea'
• rangeAreaChart.data: Data source for chart drawing
• rangeAreaChart.xField: Category field, mapping the x-coordinate of the chart element
• rangeAreaChart.yField: Value field array, mapping the lower and upper boundaries of the chart element, i.e., representing the minimum and maximum values of the data

Coordinate axes, tooltips, and other components serve as auxiliary chart display components and are optional configurations with default effects and functions:

• rangeAreaChart.axes: Coordinate axis component, displayed by default and automatically infers the coordinate system and data mapping logic based on the chart type, detailed configuration see VChart Coordinate Axis Component Configuration
• rangeAreaChart.tooltip: Tooltip, displayed by default when interacting, detailed configuration see VChart Tooltip Component Configuration
• For more component configurations, see VChart rangeAreaChart Configuration

Getting Started Quickly

Key Configurations

• The yField property is configured as an array consisting of the minimum value numeric attribute and the maximum value numeric attribute.

Range Area Chart Features

Data

• A discrete field, e.g., x
• Two numeric fields, e.g., min and max

Data is defined as follows:

data: [
  {
    name: 'rangeColumn',
    values: [
      {
        x: 'A',
        min: 5,
        max: 8
      },
      {
        x: 'B',
        min: 5,
        max: 8
      },
      {
        x: 'C',
        min: 5,
        max: 8
      }
    ]
  }
];

Combined Range Area Chart and Line Chart

Since the range area chart can only display the maximum and minimum values of each dimension, in order to display the overall trend of the data, the range area chart is usually combined with the line chart.