​
Common Properties

All chart types share these properties:

PropertyTypeDescription
typestringChart type: number, line, bar, pie, table, data_table, or composed
namestringUnique identifier for the chart
titlestringDisplay title
descriptionstringOptional description
querystringSQL query that provides chart data

​
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:

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.

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

- type: bar
  name: sales_by_country
  title: Sales by Country
  query: SELECT country, sum(amount) as total FROM sales GROUP BY country
  axis:
    - name: left
  dimensions:
    - name: country
      label: Country
      affected_filter: country_filter
  metrics:
    - name: total
      label: Total Sales

​
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

​
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

​
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

​
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