Bar Chart

Bar Chart is a statistical chart where variables are represented by the lengths of rectangles with the same width.

Generally, bar charts have only one variable and are suitable for analyzing small datasets. Rectangular bars are typically used to display counts for each level of a variable. By observing the length and fluctuations of the bars, you can see differences between one or more bar data variables, thus reflecting data stability, variation, etc., to guide and optimize actual business operations.

Advantages: Bar charts are simple and intuitive. It's easy to see the magnitude of values based on the length of the bars, and it's easy to compare differences between groups of data.

Disadvantages: Bar charts are not suitable for expressing trend data (line charts or area charts are better for this), nor are they suitable for expressing proportional data (pie charts are better for this).

Settings

Data Settings

Setting	Description
Data Source	Select the data source for the bar chart. You can add X-axis and Y-axis option fields through aggregate queries in the Data Source menu
Coordinate System Type	Select the coordinate system for data display. Options: Polar Coordinate System, 2D Cartesian Coordinate System. For details on polar coordinates, see the end of this document
Name Field	Select a field returned by the data source. This field is used for displaying bar chart label names, usually in conjunction with the Hover Display menu
X-axis Field	In the Cartesian coordinate system, select a field from the field list returned in the Data Source menu and set it as the X-axis of the bar chart
Y-axis Field	In the Cartesian coordinate system, select a field from the field list returned in the Data Source menu and set it as the Y-axis of the bar chart
Radius Field	In the polar coordinate system, select a field from the field list returned in the Data Source menu and set it as the radius value of the polar coordinate
Angle Field	In the polar coordinate system, select a field from the field list returned in the Data Source menu and set it as the grouping angle of the polar coordinate

Chart Settings

Setting	Description
X-axis	Select the X-axis where the bar chart is located. You can add multiple X-axes in the X-axis menu
Y-axis	Select the Y-axis where the bar chart is located. You can add multiple Y-axes in the Y-axis menu
Color Allocation Type	Configure the color effect of the bar chart bars. Options: Allocate colors in the palette according to the chart, Allocate colors in the palette according to the data item. When multiple charts are aggregated, you can choose to allocate by chart. For a single chart, you can choose to allocate by data item. Specific color values can be adjusted in the Style menu palette
Bar Width	Set the default width of the bar chart bars
Maximum Bar Width	Set the maximum adaptive width of the bar chart bars
Minimum Bar Width	Set the minimum adaptive width of the bar chart bars
Minimum Bar Height	Set the minimum adaptive height of the bar chart bars
Distance Between Bars in Different Charts	Set the spacing between bars in different charts. This takes effect only when there are multiple chart data
Distance Between Bars in the Same Chart	Set the spacing between bars in the same chart

Label Settings

Setting	Description
Display Label	Turn on or off the display of labels on the bar chart bars
Display Content Expression	Supports custom editing of expression syntax to achieve complex scene content display, with lower display priority than [Display Content]
Display Content	Editable label display content, does not support complex expression syntax except for prompt content, with higher display priority than [Display Content Expression]
Position	You can choose the display position of the label on the bar chart bars
Distance from Graphic	Set the distance of the label from the bars in the bar chart
Label Rotation	Set the rotation angle of the label
Text Offset X	Set the distance of the label text from the X-axis
Text Offset Y	Set the distance of the label text from the Y-axis
Color	Set the color of the label text
Background Color	Set the background color of the label text. It needs to be used together with parameters such as line height, padding, width, and height in the text style to take effect
Text Style	Set the label text to italic or normal mode
Font Weight	Set the label font weight. Options: Default, Bold, Very Bold, Light
Font	Set the label font style. Options: sans-serif, serif, monospace, Arial, Courier NEW
Font Size	Set the label font size. The font size is not less than 12 and not more than 100
Horizontal Alignment	Set the horizontal alignment of the label text, including four methods: auto, left-aligned, centered, and right-aligned
Vertical Alignment	Set the vertical alignment of the label text, including four methods: auto, top, centered, and bottom
Line Height	Set the line height of the label text. It takes effect when Exceed Width Handling is set to wrap
Padding	Set the distance of the label text within the background box
Width	Set the maximum display width of the label text. It is generally used together with Exceed Width Handling for wrapping and other configurations
Height	Set the display height of the label text. It only affects the text background height and does not affect the display of the text itself
Exceed Width Handling	Processing method after the label exceeds the maximum width, including two methods: wrap and truncate with ellipsis. If set to none, the maximum width will not take effect
Stroke Width	Set the stroke width of the label background image. It takes effect only after setting the stroke color
Stroke Color	Set the stroke color value of the label background
Stroke Radius	Set the stroke radius angle of the label background
Shadow Color	Set the shadow color of the label background. It takes effect only after setting the label background color and shadow size
Shadow Size	Set the shadow size of the label background
Shadow Horizontal Offset	Set the horizontal offset distance of the label background shadow
Shadow Vertical Offset	Set the vertical offset distance of the label background shadow

Bar Style

Setting	Description
Color	Set the color effect of the bars. It has higher priority than the palette setting and only supports single color system adjustment
Border Color	Set the color effect of the bar borders
Stroke Type	Configure the stroke type of the bars. Options: Solid Line, Dashed Line, Dotted Line
Stroke Width	Set the stroke width of the bars
Stroke Color	Set the stroke color of the bars
Stroke Radius	Set the stroke radius angle of the bars
Shadow Color	Set the shadow color of the bars
Shadow Size	Set the shadow size of the bars
Shadow Horizontal Offset	Set the horizontal offset of the bar shadow
Shadow Vertical Offset	Set the vertical offset of the bar shadow
Opacity	Set the opacity of the bars, with values ranging from 0 to 1

Label Layout

Setting	Description
Hide Overlapping Labels	When enabled, labels that overlap in content will be hidden
Overlapping Offset Direction	When labels overlap, you can choose the direction of label displacement, with options for horizontal or vertical displacement

Highlight Settings

Setting	Description
Disable Highlight	After disabling highlight, the label will no longer be highlighted when the mouse moves to the label position
Highlight Behavior	Set the interactive style of highlight display
Fade Range	Set the selection range for interactive interface fade-out during highlight, providing three methods: fade-out coordinate system, fade-out chart, or global fade-out

Stacking

Stacking refers to the way of displaying multiple chart values stacked together to form a new chart. Stacking is commonly used in two ways: bar chart stacking and line chart area stacking.

In bar charts, bars are stacked on top of each other to form a new bar, which is bar chart stacking. Stacked bar charts can visually show each small category of data within a large category and the proportion of each small category, showing the relationship between individual items and the whole. For example, when we statistics a company's product sales in the whole year of 2022, we can use the stacking method to stack the monthly sales of each product in the company on one bar, which can not only intuitively see the overall sales of the company's products each month, but also see the sales proportion of each product in each month.

Setting	Description
Stack Identifier	You can set stack identifiers for each chart separately. The system will stack chart shapes with the same identifier together
Stack Strategy	Depending on the positive and negative values of the chart, different value stacking strategies can be set

Events

Setting	Description
Non-clickable	After enabling, all label data in the chart cannot be clicked. After closing, you can set the corresponding data click interaction event
Call Automation After Click	You can implement related data label click interaction events by selecting the corresponding automation, such as opening the corresponding data form details or opening other web links after clicking
Call Automation After Double Click	The function is the same as click call, but the interaction is triggered by double-click instead of single-click. Click and double-click events can be set at the same time

Polar Coordinate Supplement

Simply put, polar coordinates are coordinate systems that describe positions using angles and lengths, which are significantly different from the display effects of line charts and bar charts in Cartesian coordinate systems. Polar coordinates can generally be used in three types of charts: bar charts, line charts, and scatter charts.

When using polar coordinates, you need to understand the following: Polar coordinate systems generally have two coordinate axes, called radial and angular, which correspond to the radial (i.e., radius) axis and angular (i.e., arc) axis of the polar coordinate. At the same time, there are four types of axis measurement types: value axis, category axis, time axis, and logarithmic axis. Selecting different types of coordinate axes will result in different data scales displayed in the chart. The usage scenarios of the four coordinate axes are as follows:

Setting	Description
Value Axis	value: Value axis, suitable for continuous data, where the size of the value is represented by the length of the radius
Category Axis	category: Category axis, suitable for discrete category data, where each category value is represented by a fixed radius length
Time Axis	time: Time axis, suitable for continuous time series data. Compared with value axes, time axes have time formatting, and the radius reflects the sequential change of time points
Logarithmic Axis	log: Logarithmic axis, suitable for logarithmic data, commonly used in line charts with dual value axes

Here we take bar charts as an example to create a simple polar coordinate bar chart comparing customer order amounts for XXX Company in the fourth quarter of 2022. The example steps are as follows:

1. Create a dashboard card, add a new data source in the Data Source menu, aggregate and query all orders in the fourth quarter of 2022 by customer, and sum to get the total order amount for each customer in the fourth quarter;
2. Add a bar chart in the Chart menu, select Polar Coordinate System in the data settings coordinate system type;
3. Select the aggregated order total amount for the Radius Field, and select the customer name for the Angle Field; the Name Field generally refers to the radial axis value name, which can be used in conjunction with hover prompts. Here we select the customer name;
4. In the Polar Coordinate menu, you can modify parameters such as axis, dividing line size, color, etc., to optimize the chart display details. It should be noted that polar coordinates generally default to a value axis for the radial axis and a category axis for the angular axis. You can flexibly adjust the axis type configuration according to different business scenarios;
5. Turn on the display hover prompt button in the Hover Prompt menu;
6. Hide the original X and Y axes in the X-axis and Y-axis menus to complete the final polar coordinate line chart configuration.