A bidirectional bar chart uses forward and reverse bars to display numerical comparisons between categories. In this chart, the categorical axis represents the categorical dimension to be compared, and the continuous axis represents the corresponding values. There are two cases: one where the positive and negative scale values are completely symmetrical, and another where the positive and negative scale values are inversely symmetrical, that is, they are negatives of each other.

2.1 Common usage scenarios #

Suitable for scenarios that require comparison of positive and negative categorical data, such as comparing income and expenditure, completed and uncompleted, and so on.
Bidirectional bar chart example

2.2 Example usage process #

Step 1: Set dimensions, metrics, and filter conditions
Select "Industry Name" as the dimension, and "Income" and "Expenditure" as the metrics

Step 2: Select the chart panel - Bidirectional bar chart

Step 3: Modify the chart format as needed

3.1 Bidirectional bar chart icon #

3.2 Configuration rules #

After selecting 1 dimension and 2 metrics, select the bidirectional bar chart to plot the chart. You can change the field order of the two metrics to adjust the left and right axis order in the chart.

3.3 Edit colors #

You can set corresponding colors for the two metrics, as shown below:

3.4 Y axis #

• Y axis: You can click the toggle button on the right side of the Y axis to choose whether to display Y axis information.
• 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.
• Navigator: Can be used to vertically scale the chart
  

3.5 X axis - left axis / X axis - right axis #

• X axis - left axis / X axis - right axis: You can click the toggle button on the right side of X axis - left axis / X axis - right axis to choose whether to display X axis - left axis / X axis - right axis information.
• Axis name checkbox: You can check or uncheck the box. After checking, you can modify the name. The default is the field name.
• Axis name (gray): You can set the font size and font color.
• Axis range: There are three options: Auto, Auto (excluding 0), and Specified range:
  • Auto: (negative values, 0, positive values), including 0;
  • Auto (excluding 0);
  • Custom range: You can manually enter the minimum and maximum values. The maximum value must be greater than the minimum value, and neither field can be empty;
    
• Data format: Click to configure the axis label data format in the pop-up window. You can set the format to number, percentage, per mille, or raw value;
  
• Axis scale: Controls the display scale of axis ticks. By default, this is linear, but logarithmic scaling is also supported, such as log(base 2), which means taking the logarithm with base 2. This is typically used in operations monitoring scenarios where two metrics on the same axis have significantly different values.
  
• 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;
• Thumbnail: Can be used to zoom the chart horizontally or vertically;

3.6 Legend and labels #

Legend:

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

Labels:
See 3.8 Legend and labels.

3.7 Tooltips #

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

• Single data point + whole row data
  
• Single data point only
  
• whole row data only
  

Custom prompt message
(1) Supports adding other metrics from the dataset to supplement the prompt message.

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

After editing the text and fields and adjusting the layout, a customized effect can be achieved. Click Preview to view the effect.

Click "Confirm" to apply to the chart.

Group control styles #

See 3.11 In-chart control styles.

Restore default settings #

Click [Restore default settings] to restore all content in the above chart configuration to the default settings.