Show change over time with filled areas, grouped values, or stacked totals.
Select the chart block and click Edit (1). Use the Data, Block and Card tabs (2) to configure it.
An area chart shows change over time like a line chart, but fills the space beneath the line so totals and volume stand out. Select an area chart block, then open Edit Block to connect it to a table and work through the Data, Block, and Card tabs.
Understand the settings tabs
1Data
Choose what information the block uses.
2Block
Change how the information is displayed.
3Card
Style the container around the block.
Start with Data:The block needs information before it can show anything. The Block and Card tabs are optional. If you do not customize them, the block and its card follow the dashboard theme. Use these tabs only when you want this block to look different from the theme.
Configure the Data tab
Choose the table columns that build the chart.
Source table
MonthRevenue
January$40k
February$70k
March$55k
→
The label column creates the X-Axis points. The value column controls the height of the filled area.
1. Data Source
Required
Choose the table that holds the information you want to show. For example, choose an Orders table to build a sales chart.
2. X-Axis
Required
Choose the column that places points along the chart, usually a date or ordered category. For a date column, Time Interval groups dates by day, month, quarter, or year.
3. Values
Required
Choose the column that contains the number or item you want to measure. Then choose its Calculation Mode.
How Calculation Mode changes the result:The selected mode turns many source values into the number plotted by the block.
Example values:102020
Sum
50
Average
16.7
Minimum
10
Maximum
20
Count
3
Count Distinct
2
Count Distinct returns 2 because the values contain two unique numbers: 10 and 20.
Choose Sum for a total
Use it for values you want to add together, such as total revenue, units sold, or hours worked.
Choose Average for a typical value
Use it for questions such as average order value, average rating, or average response time.
Choose Minimum for the smallest value
Use it to find the lowest price, shortest time, or smallest result.
Choose Maximum for the largest value
Use it to find the highest sale, longest time, or largest result.
Choose Count to count values
Use it to answer questions such as how many orders, customers, or records contain a value in the selected column.
Choose Count Distinct to count unique values
Use it when repeated values should count once, such as the number of different customers, countries, or products.
The available modes depend on the column type. Number columns support every mode. Text and date columns support Count and Count Distinct.
Add Y-Axis
Optional
Use this when the same X-Axis needs to compare two different measures. For example, use Month on the X-Axis, Revenue as the first value, and Order ID with Count as the second value. Revenue can appear as bars while the order count appears as a line.
The second value has its own column, Calculation Mode, and scale.
Leave this empty when one measure is enough. Remove the second value if the two scales make the chart difficult to understand.
Chart for the second Y-Axis
Optional
This field appears after you add the second Y-Axis. Choose Bar when the second measure should appear as columns. Choose Line when you want to emphasize its movement across the X-Axis. This changes only the second measure; the first measure does not change.
Revenue ($)Orders
Revenue uses the first scale. Order count uses the second scale. Both share the same X-Axis labels.
Group Values
Optional
Turn this on when one value needs to be separated into smaller groups. Imagine one chart label has $30 of Revenue. Without grouping, the chart shows one $30 result. If you group Revenue by Region, it shows North as $10 and South as $20 in different colors. Leave Group Values off when you only need the $30 total.
Grouped areas
Stacked areas
Group Values creates one filled area for each group. Stacked places the areas on top of each other to show the combined total.
Filter
Optional
Filter the chart by another condition from the table selected in Data Source. Choose a column, choose the condition, and enter the value to match. Leave this empty to use every row.
Example: filter the selected table:If the chart uses the Orders table, you can choose its Region column and set the condition to equals Europe. The chart then calculates its result using only European orders. This filter belongs to this block, and it does not edit the Orders table. To let viewers choose the condition themselves, add a Filter block to the dashboard.
Configure the Block tab
The Block tab controls how the area chart looks:
Data Colors
Optional
Apply a color palette to the whole chart. Use Customize individual colors when one category or series needs a different color. If you do not customize the colors, they follow the dashboard theme.
Font
Optional
Change the typeface used by chart labels and the legend. If you do not choose one here, the chart follows the dashboard theme's font.
Chart Style
Optional
Choose the visual style used to draw the chart. This changes its appearance. It does not change the chart type, values, or calculations. If you do not choose a different style, the chart follows the dashboard theme.
Default:
A simple chart with the standard appearance
Classic:
A traditional chart with clear, familiar shapes
Glow:
Bright colors with a glowing effect
Modern:
A softer, contemporary appearance
Pattern:
Patterns added to the chart colors
Grid Lines
Optional
Add horizontal or vertical guide lines behind the data. Use them when viewers need help comparing heights or reading values.
Horizontal and vertical grid lines sit behind the data.
Axis Lines
Optional
Show the X-axis, Y-axis, or both. These are the main lines at the edge of the chart.
X-axisY-axis
The X-axis runs across the bottom. The Y-axis runs up the side.
Legend
Optional
Show which color belongs to each category, group, or value. Hide it when the meaning is already clear.
Revenue Target
The legend connects each color to its meaning.
Configure the Card tab
The entire Card tab is optional. If you do not customize it, the card follows the dashboard theme. Use this tab only when you want this card to look different.
Card Style
Optional
Choose the style that fits the dashboard. This changes the card surface, border, corners, and shadow. It does not change the block's data.
Default:
Standard card
Elevated:
Rounded with a stronger shadow
Cyber:
Glowing colored edges
Claymorphic:
Soft three-dimensional shading
Flat Panel:
Square surface without a shadow
Glass:
Transparent, blurred surface
Neobrutalist:
Thick border and high contrast
Neuromorphic:
Soft surface blended into the background
Gradient:
Background that blends colors
Background
Optional
Show or hide the card surface. Available colors follow the selected style.
Icon
Optional
Add a symbol to the header. Choose its icon and background colors.
Title
Optional
Name the block. Keep it short and clear.
Description
Optional
Add context such as the unit or date range.
Footer
Optional
Add a source, update time, or short note at the bottom.
Typography is separate:Title, Description, and Footer each have their own color, font, size, and weight. These settings do not change the data inside the block.
