Docs

Intelligent Data Insight

Chart Introduction

Column Chart

1. Overview

A column chart is a statistical chart that displays data using the length of rectangles as variables. Column charts are used to compare two or more values (across different times or conditions), with only one variable, and are typically used for analyzing smaller data sets. The product provides three types of column chart components: stacked column chart, percentage column chart, and grouped column chart. It also supports flexible configuration of colors, arrangement, legends, labels, and more.

2. Quick Start

2.1 Common usage scenarios

Column charts allow for intuitive visualization of differences between groups of data. Column charts are suitable for two-dimensional data, usually with only one variable, and can be used to compare, display, and sort data. In a percentage column chart, the proportion of each series can be seen directly.

2.2 Example usage process

Step 1: Set dimensions, metrics, and filter conditions
Select [Province] and [Sales year] as dimensions, and select [order_count] as the metric (you can drag fields from the field list on the left to the data panel to select them, or click the field to make it appear in the dimensions or metrics row of the data panel).

Step 2: Select a column chart
Click the column chart icon on the chart panel to select the column chart. The system will display the column chart according to the default settings.

Step 3: Modify the chart format as needed
You can modify the format of the chart's colors, arrangement, X-axis, Y-axis, legend, labels, tooltips, and more as needed. After making changes, you will get the chart you want.

3. Feature Introduction

3.1 Column chart icon

Three types of column charts are supported. Click the small triangle under the column chart icon to switch between them.

3.1.1 Stacked column chart

Dimensions: Supports one or more dimensions. If there is more than one dimension, they will be stacked within the columns and distinguished by different colors.

Metrics: Supports one or more metrics. If there is more than one metric, they will be displayed separately along the X-axis.

3.1.2 Percentage column chart

Dimensions: Supports one or more dimensions. If there is more than one dimension, the columns will be stacked, with different colors used to distinguish them. Each column represents 100%.

Metric: Supports one or more metrics. If there is more than one metric, they will be displayed separately along the x-axis by default. The sum of all columns for the first dimension is 100%.

3.1.3 Side-by-side column chart

Supports one or more dimensions and one or more metrics. If there is more than one dimension or metric, they will be displayed in parallel in the column chart.

3.2 Configuration rules

After setting one or more dimensions and one or more metrics, you can create charts.

3.3 Edit colors

Colors can be set for metrics, and multiple built-in color schemes are available:

Also supports Custom Color Schemes.

3.4 Arrangement method

This feature applies to stacked column charts and percentage column charts, allowing you to choose whether to enable metric parallel display.

When metric parallel display is enabled, columns for multiple metrics are displayed side by side, that is, metrics are arranged horizontally, and grouping is responsible for stacking.
When metric parallel display is disabled, data is stacked or proportionally allocated according to metric × group, and metrics are not displayed in parallel.

3.4.1 Enable measures side-by-side display

3.4.2 Disable measures side-by-side display

3.5 X axis/Y axis

X axis / Y axis: You can click the toggle button to the right of the X-axis/Y-axis to choose whether to display X-axis/Y-axis information.
Axis name checkbox: You can check or uncheck this box. After checking, you can edit the name, which defaults to the field name.
Axis name (gray): You can set the font size and font color.
Axis label: You can set the font size, font color, and text angle (0–360 degrees).
Axis line: You can set the color of the axis line.
Slider: Can be used to zoom the chart horizontally or vertically. When the X-axis thumbnail is enabled, and the Y-axis value range and data format are set to auto, adjusting the thumbnail range will dynamically update the Y-axis labels.
warning
After selecting Follow data range, the thumbnail axis cannot be enabled.
Axis range (only Y axis has this setting): Auto, Auto (excluding 0), specified range, or follow the data range:
- Auto: (negative values, 0, and positive values), includes 0;
- Auto (excluding 0);
- Specified range: You can manually enter the minimum and maximum values. The value on the right must be greater than the value on the left, and neither field can be empty.
- Follow data range: The Y-axis range automatically matches the actual minimum and maximum values of the current data. When users perform filtering, linkage, or other analysis operations that cause the data range to change, the Y-axis scale will adaptively update, always using the latest minimum and maximum values within the data range as the upper and lower boundaries of the axis.
Data format (this setting is available only for the Y-axis): Click to configure the data format for the axis labels in the pop-up window. Can be set as number, percentage, per mille, or raw value.
Custom interval (this setting is available only for the Y-axis): For configuration of how Y-axis scales are displayed.
- Automatic (default): Uses the system's automatic scale calculation logic, consistent with historical charts.
- Equal intervals: Manually enter a positive integer N. The system will evenly divide the Y-axis range from minimum to maximum into N intervals, generating N+1 equally spaced tick marks (including endpoints). For example, if the Y-axis range is 0.08~0.12 and you enter 2, the tick marks will be 0.08, 0.10, and 0.12.
Value axis scale (this setting is available only for the Y-axis): Controls the scale display of the value axis. It is linear by default, but can also be set to logarithmic, such as log(base 2), which means taking the logarithm with base 2. This is generally used in scenarios such as system monitoring where two metrics on the same axis have large value differences.
warning
When the axis range is set to "Follow data range", adjusting the axis scale is not supported.

3.6 Grid lines

You can enable grid lines to assist in observing values. Both horizontal and vertical grid lines are supported, and grid line styles can also be adjusted.

3.7 Special values

You can customize the display of special values for dimensions or metrics, displaying them as blank, NULL, 0, or --.

3.7.1 In table-type charts

The display of special values for dimensions affects all dimensions; the display of special values for metrics affects all metrics.

After modification, it is displayed as follows:

3.7.2 In line charts

Connect lines at null values

Break lines at null values

Set value to 0 at null values

3.8 Legend and labels

Legend:

You can click the toggle button on the right to choose whether to display legend information.
You can set the legend's position in the chart: top, bottom, left, or right.
You can set the legend's alignment: align to top/left, center, or align to bottom/right.
You can set the maximum number of rows or columns for the legend, as well as its font and color.
You can set the legend's display mode. When there are too many legend items, you can choose between a pager or a scrollbar for display.

Labels:

You can click the toggle button on the right to choose whether to display label information.

Supports selecting default style or custom style.

Custom style supports setting the display position.

Custom style supports setting the display mode.

Caution: Only one of "sparse display" or "allow overlap" can be selected. If one is selected, the other will be grayed out, with a prompt stating "Allow overlap and sparse display cannot be selected at the same time." When labels are crowded by default, it is recommended to select "sparse display."

Custom style supports setting label font and color.

Supports setting the display content.

Caution: Percentage data format, default percentage value, and historical data can be set to two decimal places.

Supports setting the label display type: you can choose to display all, minimum value, maximum value, minimum & maximum values, or values at both ends.

Supports selecting the display mode: you can choose individual data points, total, or individual data points and total.

When the mouse hovers over the data area, the tooltips will display information.
By default, the tooltips displays the dimension and metric information of the current data. You can also customize the tooltips information as needed.
Default tooltip information
After enabling the tooltips, you can select "Display content," supporting three display modes: "Single data point + whole row data," "Single data point only," and "Whole row data only."
Note: To display single data point information, you can add fields to the single data point and customize the tooltips information. The added fields will only appear in the tooltips for single data points and will not affect chart rendering.

Single data point + whole row data
Single data point only
Whole row data only

Custom tooltip information
(1) Supports adding other metrics from the dataset to supplement the tooltips information.

(2) Click the "Advanced settings" button to further configure Custom Tooltips Information in the pop-up edit box. Supports entering text and inserting fields.

After editing the text and fields and adjusting the layout, you can achieve a customized effect. Click Preview to preview the effect.

Click "OK" to apply to the chart.