Chart
Learn about the Charts component within Budibase
Use the Chart component to display data from your tables to your users in a visually pleasing manner. The chart components pull in two types of values from your Tables; an X value and a Y value. The data within the column linked to the Y-axis must be a 'Number' (data type).

How to add a new Chart

To add a new chart to your designs:
    Click the chart button
    Select the chart type you would like to add

How to style your Chart

There are 4 types of charts within Budibase and they all have different settings and data requirements:

Donut Chart

The Donut Chart (also known as Doughnut chart) is a variation on a Pie chart except it has a round hole in the center which makes it look like a donut, hence the name.
The Donut Chart component comes with the following settings:
Setting
Required
Description
Name
Yes
Change the name of the component
Table
Yes
Choose a table to link your chart to
Name Field
Yes
Select the column would you like to set as your categories
Value Field
Yes
Select the column you would like to display as your values (must be a number data type)
Animate chart
No
Tell your chart to load in an animated fashion
Hover highlight
No
Tell your chart to display the relevant value when the user hovers
Keep last hover
No
Tell your chart to continue to present the last value hovered
Colors
No
Select different color palettes
Legend width
No
Control the width of the accompanying legend

​

Bar Chart

The classic Bar Chart uses either horizontal or vertical bars (column chart) to show discrete, numerical comparisons across categories. One axis of the chart shows the specific categories being compared and the other axis represents a value scale.
The Bar Chart component comes with the following settings:
Setting
Required
Description
Name
Yes
Change the name of the component
Table
Yes
Choose a table to link your chart to
Name Field
Yes
Select the column would you like to set as your categories
Value Field
Yes
Select the column you would like to display as your values (must be a number data type)
Y-Axis Label
No
Add a label to your Y-Axis
X-Axis Label
No
Add a label to your X-Axis
Colors
No
Select different color palettes for your bars
Gradients
No
Select different gradients palettes for your bars
Highlight single bar
No
Highlight a bar when hovered
Width
No
Give your chart a width
Height
No
Give your chart a height

​

Line Chart

A line chart (also known as a line plot or line graph) is a chart that uses lines to connect individual data points that display quantitative values over a specified time interval. The Line Chart component comes with the following settings:
Setting
Required
Description
Name
Yes
Change the name of the component
Table
Yes
Choose a table to link your chart to
Name Column
Yes
Select the column would you like to set as your categories
Value Column
Yes
Select the column you would like to display as your values (must be a number data type)
Date
Yes
Select the column you would like to display as your dates (must be a data/time data type)
Colors
No
Select different color palettes for your bars
Line Curve
No
Set how you would like the line curve displayed
X-Axis Value Type
No
Select between data and number
Grid
No
Dictate the direction of the grid
Y-Axis Label
No
Add a label to your Y-Axis
X-Axis Label
No
Add a label to your X-Axis
Show All Datapoints
No
Select to highlight data points on your chart
Width
No
Give your chart a width
Height
No
Give your chart a height
Is Animated
No
Tell your chart to load in an animated fashion
Locale
No
Select between a UK and US locale format
X-Axis Value Type
No
Select between a number and date format
X-Axis Format
No
Select your date format
Tooltip title
No
Provide a title for your tooltip
X Ticks
No
Outline how many integers you would like along your X-Axis
Y Ticks
No
Outline how many integers you would like along your Y-Axis

​

Grouped Bar Chart

Setting
Required
Description
Name
Yes
Change the name of the component
Table
Yes
Choose a table to link your chart to
Group Column
Yes
Select the column you would like to use to group your bars
Name Column
Yes
Select the column would you like to set as your categories
Value Column
Yes
Select the column you would like to display as your values (must be a number data type)
Colors
No
Select different color palettes for your bars
Width
No
Give your chart a width
Height
No
Give your chart a height
Grid
No
Dictate the direction of the grid
Y Ticks
No
Outline how many integers you would like along your Y-Axis
Is Animated
No
Tell your chart to load in an animated fashion
Is Horizontal
No
Transform your vertical grouped bar chart to a horizontal grouped bar chart
Tooltip Title
No
Provide a title for the chart's tooltips (hover over bars to see)
​
​
​
Last modified 1mo ago