Area Chart

An area chart is a type of chart based on a line chart, where the area below the line is filled to represent the data. Compared to a line chart, an area chart emphasizes the overall changes in the data and the relationship between different parts.

Suitable scenarios include:

1. Displaying changes in data volume: Area charts are especially effective when you need to show the trend of a quantity over time or across categories, and want to highlight changes in the total data volume or the stacking effect.
2. Showing the relationship between parts and the whole: When you need to display multiple data series and compare their proportions, an area chart (especially a stacked area chart) can clearly express the contribution of each part to the overall total.
3. Representing cumulative data: Ideal for scenarios where you need to show the cumulative change or total change of a particular quantity.

Basic Mode

In basic mode, drawing an area chart requires:

1. X-axis and Data: select columns via the dropdown menus. These are required.
2. Color Scheme: select a color scheme from the dropdown. The default is the "Default" color scheme.
3. Template: select a template using the "Change" button. If not selected, the default template is used.
4. Visibility: specify whether the X-axis, Y-axis, tooltip, and legend are visible. By default, the X-axis and tooltip triggered by the cursor are displayed.

Advanced Mode

In advanced mode, more option values can be adjusted.

Axis

This includes both X and Y axes.

• Corresponding Column (X, Y): select columns from the data using the dropdown. X is required, and Y is optional. If no Y column is selected, the chart will automatically adjust.
• Visibility: controlled via the toggle button above.
• Line Color: the default is , indicating that the axis line is not displayed. You can click to select a color from the color palette or enter a HEX value to specify your preferred color. indicates using the default color.
• Line Width: specifies the thickness of the axis line.

Ticks and labels:

• Label: configure the color, font weight, and rotation angle of the labels.
• Format: use formulas to process the label text.
• Line: by default, it is not displayed. When enabled, you can configure the thickness and length of the ticks.
• Layout: configure the minimum distance between ticks and the spacing between ticks and labels.
• Numeric: when the axis column corresponds to numeric data, you can specify the number of ticks.
• Inside: controls whether the ticks and labels are displayed inside or outside the axis.

Chart/Area

A chart can display multiple areas, and you can add or remove areas using the and buttons at the top right corner of the panel.

For each area, the options include:

• Data: select a column from the data using a dropdown menu.
• Line: configure the style of the connecting line for the area border and the data point outlines. You can configure the line type, including linear, natural, monotone, and step. Additionally, you can set the color, width, and dash type.
• Dot: configure the style of the data points on the area border. You can set the fill color, radius, and also independently configure the style when the cursor is focused (Active).
• Fill: configure the fill color, opacity, and whether to enable a gradient color for the area.
• Label: by default, data point labels are not displayed. When enabled, you can configure the color, font size, position, and offset.

Layout

Includes:

• Margin: configure the top, bottom, left, and right margins of the drawing area (including the axis).
• Grid: configure whether the horizontal and vertical gridlines are displayed.
• Stack: configure whether multiple areas are stacked and the style of stacking. By default, stacking is enabled. If you need to show the relationship between multiple data series, you can choose a stacked area chart. Each data series' area will stack on top of the previous series, displaying the contribution of each part to the overall total.

Description

Used to configure the display of supplementary information for the chart.

• Title: configure the title of the chart, located at the top of the chart.
• Description: configure the description of the chart, located below the title.
• Footer: configure the footer text of the chart, located at the bottom of the chart.
• Tooltip: configure whether to display the tooltip, its offset, and whether the cursor line is shown.
• Legend: configure whether to display the legend, its position on the chart. By default, it is positioned at the bottom of the chart, below the X-axis and above the footer text.