Skip to main content
Chart widgets allow you to create interactive visualizations from your database tables. VizBoard supports bar charts, line charts, area charts, and pie charts with automatic data aggregation and grouping capabilities.

​
Supported Chart Types

Bar Charts

Type: bar_charts
Subtype: basic_barCompare values across categories with vertical bars

Line Charts

Type: line_charts
Subtype: basic_lineShow trends over time or continuous data

Area Charts

Type: area_charts
Subtype: basic_areaDisplay cumulative trends with filled areas

Pie Charts

Type: pie_charts
Subtype: basic_pieShow proportions and percentages

​
Configuration

​
Required Fields

All chart widgets require the following configuration:
  1. Connection - Database connection to query
  2. Table - Single table to visualize
  3. X-Axis Column - Category/label column (non-numeric)
  4. Y-Axis Columns - One or more numeric value columns
  5. Title - Descriptive chart name (required)

​
Configuration Object

interface ChartConfig {
  connectionId?: string      // Database connection ID
  tableName: string           // Table name
  xAxisColumn: string         // Column for categories/labels
  yAxisColumns: string[]      // Numeric columns for values
  chartType: "bar" | "line" | "area" | "pie"
  groupXAxis?: boolean        // Enable grouping by X-axis
  groupAggregation?: "sum" | "average"  // Aggregation method
  expanded?: boolean          // Widget size (desktop only)
}

​
Examples

​
Basic Bar Chart

{
  "type": "bar_charts",
  "subtype": "basic_bar",
  "title": "Sales by Region",
  "description": "Total sales amount by geographic region",
  "configs": {
    "connectionId": "conn_123abc",
    "tableName": "sales",
    "xAxisColumn": "region",
    "yAxisColumns": ["total_amount"],
    "chartType": "bar"
  }
}

​
Multi-Series Line Chart

{
  "type": "line_charts",
  "subtype": "basic_line",
  "title": "Revenue vs Expenses",
  "configs": {
    "connectionId": "conn_123abc",
    "tableName": "monthly_financials",
    "xAxisColumn": "month",
    "yAxisColumns": ["revenue", "expenses", "profit"],
    "chartType": "line"
  }
}

​
Area Chart with Grouping

{
  "type": "area_charts",
  "subtype": "basic_area",
  "title": "Average Order Value by Category",
  "configs": {
    "connectionId": "conn_123abc",
    "tableName": "orders",
    "xAxisColumn": "product_category",
    "yAxisColumns": ["order_value"],
    "chartType": "area",
    "groupXAxis": true,
    "groupAggregation": "average"
  }
}

​
Chart with Sum Aggregation

{
  "type": "bar_charts",
  "subtype": "basic_bar",
  "title": "Total Inventory by Warehouse",
  "configs": {
    "connectionId": "conn_123abc",
    "tableName": "inventory",
    "xAxisColumn": "warehouse_name",
    "yAxisColumns": ["quantity"],
    "chartType": "bar",
    "groupXAxis": true,
    "groupAggregation": "sum"
  }
}

​
Aggregation Options

Default BehaviorWhen groupXAxis is false or not specified:
  • Each row in your table becomes a data point
  • If multiple rows have the same X-axis value, they appear as separate points
  • Best for: Pre-aggregated data or when you want to show individual records
{
  "groupXAxis": false
}

​
Data Requirements

​
X-Axis Column (Categories)

The X-axis column must contain non-numeric data (text/string values).
Supported types:
  • String
  • Text
  • VARCHAR
  • CHAR
  • Date (displayed as formatted strings)
The configuration dialog automatically filters to show only non-numeric columns for X-axis selection.

​
Y-Axis Columns (Values)

Y-axis columns must contain numeric data.
Supported types:
  • INTEGER
  • BIGINT
  • DECIMAL
  • NUMERIC
  • REAL
  • DOUBLE PRECISION
  • SMALLINT
  • INT
  • FLOAT
  • NUMBER
You can select multiple Y-axis columns to create multi-series charts.

​
Features

Interactive Tooltips

Hover over data points to see detailed values

Legend

Automatically generated legend for multi-series charts

Responsive Design

Charts adapt to container size and screen width

Expand/Collapse

Desktop users can expand charts to double width (2 columns)

Data Refresh

Manual refresh button to reload chart data

Color Coding

Automatic color assignment for multiple series

​
Chart-Specific Behavior

​
Bar Charts

  • Best for comparing discrete categories
  • Supports multiple Y-axis columns (grouped bars)
  • Vertical orientation
  • Grid lines for easy value reading

​
Line Charts

  • Ideal for showing trends over time
  • Multiple lines for different metrics
  • Smooth curve option available
  • Connected data points

​
Area Charts

  • Similar to line charts with filled areas
  • Shows cumulative effect visually
  • Supports stacked areas for multiple series
  • Great for showing volume or magnitude

​
Pie Charts

  • Shows proportional relationships
  • Best with single Y-axis column
  • Displays percentages automatically
  • Interactive segment highlighting
Pie charts are best suited for datasets with a limited number of categories (5-10 max) to maintain readability.

​
Usage Tips

  • Bar charts: Comparing categories, rankings, discrete data
  • Line charts: Time series, trends, continuous data
  • Area charts: Cumulative trends, volume over time
  • Pie charts: Proportions, percentages, parts of a whole
Enable groupXAxis when:
  • Your data has duplicate X-axis values that need combining
  • You’re showing raw transaction data that needs aggregation
  • You want to see totals or averages per category
Keep it disabled when:
  • Your data is already aggregated
  • You want to see individual data points
  • Each row represents a unique category
Use multiple Y-axis columns to:
  • Compare related metrics (revenue vs expenses)
  • Show multiple dimensions of the same category
  • Create multi-series visualizations
Limit to 3-5 series for readability. Too many series can make charts cluttered.
  • Charts load all data at once (no pagination)
  • Large datasets (>1000 rows) may impact performance
  • Use database views or aggregated tables for better performance
  • Consider grouping to reduce data points

​
Data Transformation

The chart widget automatically transforms your database data:
  1. Validation: Filters out rows with invalid or missing values
  2. Type Conversion: Converts string numbers to numeric values
  3. Grouping: Optionally groups by X-axis value
  4. Aggregation: Applies sum or average to grouped data
  5. Normalization: Ensures all values are finite numbers
Source: src/components/dashboard/widgets/charts/utils/dataTransformer.ts

​
Expanded View

On desktop (XL breakpoint), charts can be expanded to double width: 
// Stored in widget configuration
{
  "configs": {
    // ... other config
    "expanded": true  // Chart spans 2 columns
  }
}
Users can toggle expansion using the chevron button in the widget header. The preference is automatically saved.

​
Source Code Reference

Chart widget implementation:
  • Configuration: src/components/dashboard/widgets/charts/chartConfig.tsx:57-792
  • Widget Rendering: src/components/dashboard/widgets/charts/chartWidget.tsx:31-289
  • Bar Chart: src/components/dashboard/widgets/charts/barChart.tsx
  • Line Chart: src/components/dashboard/widgets/charts/lineChart.tsx
  • Area Chart: src/components/dashboard/widgets/charts/areaChart.tsx
  • Data Transformer: src/components/dashboard/widgets/charts/utils/dataTransformer.ts:3-176

Simple Datatables

View the raw data behind your charts

Integrated Datatables

Compare data across multiple databases

Build docs developers (and LLMs) love

Get started for freeTalk to us