Bar Chart

Configurable options for the bar chart.

A bar chart is commonly used to compare the size differences between different categories or groups. It displays data through vertical bars, where the height of each bar represents the size of the data value.

Suitable scenarios include:

  1. Category Comparison: When you want to compare the quantity or value between different categories (such as products, regions, departments, etc.), a bar chart is highly effective.
  2. Ranking Data: Bar charts are especially suitable for displaying ranking data, as they clearly show the size differences between each category.
  3. Comparing Multiple Datasets: Stacked bar charts can display comparisons between multiple data series and show the contribution of each part to the overall total.

Basic Mode

In basic mode, drawing a bar 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/Bar

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

For each bar group, the options include:

  • Data: select a column from the data using a dropdown menu.
  • Fill: configure the fill color, opacity, and whether to enable gradient colors for the bar.
  • Stroke: configure the style of the bar's outline, which is hidden by default. You can set the color, thickness, and dash type.
  • Bar: configure the width and corner radius of the bars. The width can be set using either an absolute value or a percentage.
  • Label: by default, bar labels are not displayed. When enabled, you can configure the color, font size, position, and offset.
  • LabelOfKey: the key label represents the X variable's label and is hidden by default. When enabled, you can configure the color, font size, position, and offset. It is generally used to display the X label inside the bar.

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 bar groups are stacked and the stacking style. By default, stacking is not used, and the bars are arranged horizontally next to each other. If you have multiple data series, a stacked bar chart can display the contribution of different parts 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.
Area ChartCombined Chart