Common Properties
All chart types share these properties:
| Property | Type | Description |
|---|
type | string | Chart type: number, line, bar, pie, radial, table, data_table, composed, heatmap, or scatter |
name | string | Unique identifier for the chart |
title | string | Display title |
description | string | Optional description |
query | string | SQL query that provides chart data |
chart_config | object | (Optional) Chart configuration options |
Chart Configuration
The chart_config object allows you to customize chart appearance and behavior:
| Property | Type | Description |
|---|
show_legend | boolean | (Optional) Whether to show the chart legend (default: false) |
show_labels | boolean | (Optional) Whether to show labels on the chart (default: false) |
fill_donut | boolean | (Optional, pie charts only) Whether to fill the donut chart (default: false) |
is_stacked | boolean | (Optional, bar/pie charts) Whether to stack elements (default: false) |
line_type | string | (Optional, line/composed charts) Line style: linear, monotone, step, natural |
fill_area | boolean | (Optional, line charts only) Whether to fill the area under the line |
custom_chart_type | string | (Optional, custom charts only) Custom chart type identifier |
sub_expression | string | (Optional, number/radial charts) Sub-expression for metric calculation |
page_size | integer | (Optional, data_table charts) Number of rows per page |
layout | string | (Optional, bar charts) Layout orientation: horizontal or vertical |
hide_expression | string | (Optional, all chart types) JavaScript expression to conditionally hide the chart based on data (e.g., "(data) => {return data.length < 5}") |
Number Charts
Number charts display a single metric value, often used for KPIs.
You can add an icon next to the number using any Lucide icon, and control its color with icon_variant.
Required properties for number metrics:
| Property | Type | Description |
|---|
icon | string | (Optional) Lucide icon name (e.g., check, star) |
icon_variant | string | (Optional) One of: default, neutral, success, warning, error |
For detailed information, check the YAML reference.
Datazone currently uses Lucide version 0.515.0. If you try to use an icon introduced in a newer version, it may cause an error or not display correctly. See the
Lucide icon gallery for available icons in 0.515.0.
- type: number
name: completed_tasks
title: "Completed Tasks"
query: "SELECT count(*) as completed FROM tasks WHERE status = 'done'"
metrics:
- name: completed
label: Completed Tasks
icon: check
icon_variant: success
format: "0"
Composed Charts
Composed charts allow you to combine line and bar series in a single chart, each mapped to a specific axis. Use the axis property to define axes, and set axis_name and composed_type for each metric.
- type: composed
name: top_products_composed
title: Top Performing Products
description: Top 10 products by revenue
query: |
SELECT
ProductName as product,
SUM(OrderLineTotalAmount) as revenue,
AVG(OrderLineTotalAmount) as avg_revenue
FROM consolidated_sales_df_299ceb
WHERE 1=1
{% if region_filter is defined %}
AND CustomerRegion = '{{ region_filter }}'
{% endif %}
{% if product_group_filter is defined %}
AND ProductGroup = '{{ product_group_filter }}'
{% endif %}
GROUP BY ProductName
ORDER BY revenue DESC
LIMIT 10;
axis:
- name: left
- name: right
position: right
dimensions:
- name: product
label: Product
metrics:
- name: revenue
label: Revenue
axis_name: "left"
composed_type: "bar"
format: "$0,0.00"
- name: avg_revenue
label: "Average Revenue"
axis_name: "right"
composed_type: "line"
format: "0,0[.]00 $"
Line Charts
Line charts visualize trends over time or continuous data. You can use the axis property to define multiple axes and assign metrics to them using axis_name. Use fill_area to control whether the area under the line is filled.
- type: line
name: sales_trend
title: "Sales Trend"
query: "SELECT date, sum(amount) as total, avg(amount) as avg FROM sales GROUP BY date ORDER BY date"
chart_config:
fill_area: true
axis:
- name: left
- name: right
position: right
dimensions:
- name: date
label: Date
metrics:
- name: total
label: Daily Sales
axis_name: left
- name: avg
label: Average Sales
axis_name: right
Line Chart Configuration
| Property | Type | Description |
|---|
fill_area | boolean | (Optional) Whether to fill the area under the line (default: true) |
Bar Charts
Bar charts compare values across categories. You can use the affected_filter attribute under a dimension to allow users to update a filter by clicking a bar.
Standard Bar Charts
- type: bar
name: sales_by_country
title: Sales by Country
query: SELECT country, sum(amount) as total FROM sales GROUP BY country
dimensions:
- name: country
label: Country
affected_filter: country_filter
metrics:
- name: total
label: Total Sales
Stacked Bar Charts
Stacked bar charts allow you to show multiple metrics stacked on top of each other for each category. Use the chart_config.stacked property to enable stacking:
- type: bar
name: monthly_order_performance
title: Monthly Order Performance
query: |
SELECT
month,
sum(orders) as orders,
sum(customers) as customers
FROM sales_data
GROUP BY month
ORDER BY month
chart_config:
is_stacked: true
show_legend: true
dimensions:
- name: month
label: Month
metrics:
- name: orders
label: Orders
- name: customers
label: Customers
Chart Configuration for Bar Charts
| Property | Type | Description |
|---|
is_stacked | boolean | (Optional) Whether to stack bars on top of each other |
show_legend | boolean | (Optional) Whether to show the legend for multi-series charts |
show_labels | boolean | (Optional) Whether to show labels on the bars |
Vertical Layout Bar Charts
You can create vertical layout bar charts by setting layout: vertical in the chart configuration:
- type: bar
name: monthly_order_performance
title: Monthly Order Performance
query: |
SELECT
month,
sum(orders) as orders,
sum(customers) as customers
FROM sales_data
GROUP BY month
ORDER BY month
axis:
- name: top_axis
position: top
- name: bottom_axis
position: bottom
chart_config:
layout: vertical
show_legend: true
dimensions:
- name: month
label: Month
metrics:
- name: orders
label: Orders
axis_name: top_axis
- name: customers
label: Customers
axis_name: bottom_axis
Pie Charts
Pie charts show part-to-whole relationships. You can use the affected_filter attribute under a dimension to allow users to update a filter by clicking a pie slice.
- type: pie
name: sales_distribution
title: Sales Distribution
query: SELECT category, sum(amount) as total FROM sales GROUP BY category
dimensions:
- name: category
label: Category
affected_filter: category_filter
metrics:
- name: total
label: Total Sales
Donut Charts
You can create donut charts by setting fill_donut: false in the chart configuration:
- type: pie
name: revenue_by_region
title: Revenue by Region
query: SELECT region, sum(revenue) as total_revenue FROM sales GROUP BY region
chart_config:
fill_donut: false
show_labels: true
show_legend: false
dimensions:
- name: region
label: Region
metrics:
- name: total_revenue
label: Total Revenue
format: "$0,0.00"
Radial Charts
Radial charts display progress or completion metrics in a circular format. They require exactly two metrics: the first metric represents the current value (displayed with a label), and the second metric represents the total or maximum value.
- type: radial
name: task_completion
title: "Task Completion"
description: "Current progress on project tasks"
query: "SELECT sum(case when status = 'completed' then 1 else 0 end) as completed_tasks, count(*) as total_tasks FROM tasks"
metrics:
- name: completed_tasks
label: "Completed Tasks"
format: "0,0"
- name: total_tasks
label: "Total Tasks"
format: "0,0"
Table Charts
Table charts display raw data in tabular format.
- type: table
name: recent_orders
title: "Recent Orders"
description: "Last 100 orders placed"
query: "SELECT * FROM orders ORDER BY date DESC LIMIT 100"
Data Table Charts
Data Table charts provide advanced tabular display with custom formatting and alignment for each column.
- Sorting: Users can click on column headers to sort the table by any dimension or metric, ascending or descending.
- Pagination: Large result sets are automatically split into pages, allowing users to navigate through data efficiently.
This makes data_table ideal for exploring large datasets interactively within your Intelligent App.
- type: data_table
name: detailed_orders
title: "Detailed Orders"
description: "All order details with formatting"
query: "SELECT order_id, amount, status FROM orders ORDER BY date DESC LIMIT 100"
dimensions:
- name: order_id
label: Order ID
table_align: left
- name: amount
label: Amount
number_format: "$0,0.00"
table_align: right
- name: status
label: Status
table_align: left
Chart Config
Chart configuration options allow you to customize the appearance and behavior of your charts. Common properties include:
page_size: (For data_table) Number of rows per page
chart_config:
page_size: 20
Use the format attribute under each metric to control how numbers are displayed:
| Format | Example | Result |
|---|
"0,0" | 1234 | ”1,234” |
"$0,0.00" | 1234.5 | ”$1,234.50” |
"0.0%" | 0.123 | ”12.3%“ |
"0.00a" | 1234 | ”1.23k” |
Dimensions
| Property | Type | Description |
|---|
name | string | Unique identifier for the dimension |
label | string | Display label for the dimension |
number_format | string | (Optional) Number format for this dimension |
table_align | string | (Optional) Table alignment: left or right |
Heatmap Charts
Heatmap charts visualize data where individual values are represented as colors. They require exactly two dimensions and one metric. Heatmaps are ideal for showing relationships between two categorical dimensions with a numeric value determining the color intensity.
- type: heatmap
name: sales_by_region_product
title: "Sales by Region and Product"
description: "Sales distribution across regions and products"
query: |
SELECT
region,
product_category,
SUM(sales_amount) as total_sales
FROM sales_data
GROUP BY region, product_category
ORDER BY region, product_category
chart_config:
show_legend: true
dimensions:
- name: region
label: Region
- name: product_category
label: Product Category
metrics:
- name: total_sales
label: Total Sales
format: "$0,0.00"
Scatter Plot Charts
Scatter plot charts visualize the relationship between two numerical variables. Each point represents a data record, positioned according to the values of two metrics on the x and y axes. Scatter plots are ideal for identifying correlations, patterns, or outliers in your data.
- type: scatter
name: example_scatter_chart
title: Sales Profiles by Countries
query: |
SELECT
CustomerCountry,
ROUND(AVG(UnitPrice), 2) as avg_unit_price,
ROUND(SUM(InvoiceTotalAmount), 2) as total_invoice_count
FROM consolidated_sales_df_9cb4a3
GROUP BY CustomerCountry
ORDER BY total_invoice_count DESC
LIMIT 20;
dimensions:
- name: CustomerCountry
label: "Country"
metrics:
- name: avg_unit_price
label: Average Unit Price
- name: total_invoice_count
label: Total Invoice Count
chart_config:
show_labels: true
Scatter plots require exactly one dimension and two to three metrics. The first metric is plotted on the x-axis, the second metric on the y-axis, and an optional third metric can be used for additional visualization properties.
Advanced Features
Multi-Series Charts
For line and bar charts, you can include multiple metrics:
- type: line
name: revenue_vs_cost
title: "Revenue vs Cost"
query: "SELECT date, sum(revenue) as rev, sum(cost) as cost FROM financials GROUP BY date"
dimensions:
- name: date
label: Date
metrics:
- name: rev
label: Revenue
- name: cost
label: Cost
Text (Markdown)
Render rich text using Markdown in your Intelligent App.
components:
texts:
- name: features_md
title: Features
content: |
## Key Features
### Data Analysis
- Real-time data processing
- Advanced analytics
- Custom visualizations
### User Experience
- Intuitive interface
- Responsive design
- Mobile-friendly
```sql
SELECT
id,
name,
created_at
FROM users
WHERE active = true;
```
layout:
tabs:
- name: features
title: Features
items:
- type: text
name: features_md
span: 12
For full attributes, see the YAML Reference: Texts.