Components

Common Properties

All chart types share these properties:

Property	Type	Description
`type`	string	Chart type: `number`, `line`, `bar`, `pie`, `radial`, `table`, `data_table`, or `composed`
`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:

Property	Type	Description
`fill_donut`	boolean	(Optional) Whether to fill the donut chart (for pie charts)
`show_labels`	boolean	(Optional) Whether to show labels on the chart
`show_legend`	boolean	(Optional) Whether to show the chart legend

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.

- 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"
  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

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: sales_breakdown
  title: Sales Breakdown by Region
  query: |
    SELECT 
      region,
      sum(online_sales) as online,
      sum(retail_sales) as retail,
      sum(wholesale_sales) as wholesale
    FROM sales_data 
    GROUP BY region
    ORDER BY region
  chart_config:
    is_stacked: true
    show_legend: true
  dimensions:
    - name: region
      label: Region
  metrics:
    - name: online
      label: Online Sales
      format: "$0,0.00"
    - name: retail
      label: Retail Sales
      format: "$0,0.00"
    - name: wholesale
      label: Wholesale Sales
      format: "$0,0.00"

Chart Configuration for Bar Charts

Property	Type	Description
`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

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

Formatting

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"

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.

Get Started

Reference

Deployment

Tutorial

Common Properties

Chart Configuration

Number Charts

Composed Charts

Line Charts

Bar Charts

Standard Bar Charts

Stacked Bar Charts

Chart Configuration for Bar Charts

Pie Charts

Donut Charts

Radial Charts

Table Charts

Data Table Charts

Chart Config

Formatting

Dimensions

Heatmap Charts

Advanced Features

Multi-Series Charts

Text (Markdown)

Get Started

Reference

Deployment

Tutorial

​Common Properties

​Chart Configuration

​Number Charts

​Composed Charts

​Line Charts

​Bar Charts

​Standard Bar Charts

​Stacked Bar Charts

​Chart Configuration for Bar Charts

​Pie Charts

​Donut Charts

​Radial Charts

​Table Charts

​Data Table Charts

​Chart Config

​Formatting

​Dimensions

​Heatmap Charts

​Advanced Features

​Multi-Series Charts

​Text (Markdown)

Common Properties

Chart Configuration

Number Charts

Composed Charts

Line Charts

Bar Charts

Standard Bar Charts

Stacked Bar Charts

Chart Configuration for Bar Charts

Pie Charts

Donut Charts

Radial Charts

Table Charts

Data Table Charts

Chart Config

Formatting

Dimensions

Heatmap Charts

Advanced Features

Multi-Series Charts

Text (Markdown)