Present statistical results using horizontal or vertical bars with different heights or lengths, which are corresponding to the values. Display and compare the frequency, amount, or measure clustered into categories in a graphical way using the Column Chart control.
Column/Bar graphs can be used to show how something changes over time or to compare different times. Column/Bar graphs are good for plotting data that spans many years (or days, weeks . . .), has really big changes from year to year (or day to day . . .), or they can be used for comparing different items in a related category (for example: comparing something between different states).
Add Column Chart to the page
Firstly, find the Column Chart control in the controls add panel. Then, drag and drop it into a section or container on your page.
Select data source
The source explains where you found the information that is in your graph. Select the target data list as the source content to create Column Chart based on filters conditions.
Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.
Afterward, move on to the List section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Chart type, X and Y axis
Open the Content > Chart block to select the chart type and the fields as X-axis and Y-axis of this Column Chart.
Chart Type: select the chart type as Clustered column, Stacked column, Clustered bar, or Stacked bar.
Clustered column/bar: Use this chart type to compare values to across a few categories.
Stacked column/bar: Use this chart type to compare parts of a whole and show how parts of a whole change over time.
X-axis (Category): Column chart have an x-axis and a y-axis. The x-axis has numbers representing different time periods or names of things being compared.
Select one of the field included in the selected data list as the X-axis (category) of this Column Chart.
X-axis (Sub category): This sub category is optional. If you wanna show 2 type of categories on X-axis, you can select another field as your second category. when the sub category on X-axis is set, you can only set one Y-axis, and the Y-axis (second value) will be disabled.
Y-axis (Value): Typically, the y-axis has numbers for the amount of stuff being measured. The y-axis usually starts counting at 0 and can be divided into as many equal parts as you want to.
Select the field to calculate value of this Column Chart, and choose the method about how to calculate the result. For numeric fields, the calculation type can be count (count the number of records), sum (sum of the total value of records), Count distinct (tallies unique values in data), Avg, Max or Min.
Y-axis (Second Value): This second value is optional. If you wanna show 2 type of values on Y-axis, you can select another field as your second value. when this field is set, you can only set one X-axis, and the X-axis (Sub category) will be disabled.
Settings of Column Chart
Chart Height: Set the height of this Column Chart control.
Axis Line: Show/hide the line of Axis on the Column Chart.
Grid: Show/hide the grid line on the Column Chart.
Axis Labels: Show/hide the labels of X-axis and Y-axis.
Title of Column Chart
Display: turn on to show title of the Column Chart.
Chart Title: type the text of the title, or set dynamic content as the title text.
Title Position: set the display position of the title as Before Chart or After Chart.
Text Align: Set the alignment of the title as Left, Center, Right, or Justify.
Legend of Column Chart
Display: turn on to show Legend of the Column Chart.
Position: set the display position of the legend around the Column Chart.
Tooltip of Column Chart
Enable: turn on to show Tooltip of the Column Chart.
Number Suffix: set the suffix of the number on the Tooltip.
Styling the Column Chart control
Title
Text Color: Set the color of the title.
Typography: Set the typography of the title.
Margin: Set the Margin of the title in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the title in PX , %, em, rem, vw, calc.
Text Shadow: Adjust box shadow options.
Label
Font Family: Set font family of the label.
Size: Set font size of the label.
Weight: Set font weight of the label.
Style: Set font style of the label.
Text Color: Set the color of the label.
Legend
Font Family: Set font family of the legend.
Size: Set font size of the legend.
Weight: Set font weight of the legend.
Style: Set font style of the legend.
Line-Height: Set line-height of the legend.
Text Color: Set the color of the legend.
Tooltip
Background Color: Set the background color of the Tooltip container.
Padding: Set the Padding of the tooltip container in PX , %, em, rem, vw, calc.
Text Shadow: Adjust box shadow options.
Title: Set the Title's style of the Tooltip.
Font Family: Set font family of the Tooltip's title.
Size: Set font size of the Tooltip's title.
Weight: Set font weight of the Tooltip's title.
Style: Set font style of the Tooltip's title.
Line-Height: Set line-height of the Tooltip's title.
Text Color: Set the color of the Tooltip's title.
Value: Set the Value's style of the Tooltip.
Font Family: Set font family of the Tooltip's value.
Size: Set font size of the Tooltip's value.
Weight: Set font weight of the Tooltip's value.
Style: Set font style of the Tooltip's value.
Line-Height: Set line-height of the Tooltip's value.
Text Color: Set the color of the Tooltip's value.
Advanced Settings
Set the Advanced options that are applicable to this control.