Skip to main content

​
Common Properties

All chart types share these properties:
PropertyTypeDescription
typestringChart type: number, line, bar, pie, radial, table, data_table, or composed
namestringUnique identifier for the chart
titlestringDisplay title
descriptionstringOptional description
querystringSQL query that provides chart data
chart_configobject(Optional) Chart configuration options

​
Chart Configuration

The chart_config object allows you to customize chart appearance:
PropertyTypeDescription
fill_donutboolean(Optional) Whether to fill the donut chart (for pie charts)
show_labelsboolean(Optional) Whether to show labels on the chart
show_legendboolean(Optional) Whether to show the chart legend

​
Number Charts

Number charts display a single metric value, often used for KPIs.
Intelligent App Example
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:
PropertyTypeDescription
iconstring(Optional) Lucide icon name (e.g., check, star)
icon_variantstring(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.
Intelligent App Example
- 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

PropertyTypeDescription
fill_areaboolean(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
Stacked Bar Chart Example

​
Chart Configuration for Bar Charts

PropertyTypeDescription
is_stackedboolean(Optional) Whether to stack bars on top of each other
show_legendboolean(Optional) Whether to show the legend for multi-series charts
show_labelsboolean(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.
Radial Chart Example
- 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.
Intelligent App Example
- 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.
Intelligent App Example
- 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

​
Formatting

Use the format attribute under each metric to control how numbers are displayed:
FormatExampleResult
"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

PropertyTypeDescription
namestringUnique identifier for the dimension
labelstringDisplay label for the dimension
number_formatstring(Optional) Number format for this dimension
table_alignstring(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.
Heatmap Chart Example
- 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"

​
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.
Markdown component example
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.