Chart Reference
This is a detailed configuration guide for the widget types provided in the D.Hub dashboard. Understanding each widget's characteristics and configuration options will help you build visualizations tailored to your needs.
Statistic Card
Highlights a single numeric KPI. Place it at the top of the dashboard to see key metrics at a glance.
- Single Numeric KPI: Displays one aggregated value prominently (e.g., total revenue, active users)
- Prefix/Suffix: Unit display (e.g., $, ₩, %, cases)
| Setting | Required | Description |
|---|---|---|
| Value Field | ✅ | Numeric field and aggregation function |
| Prefix | Text to display before the value (e.g., $, ₩) | |
| Suffix | Text to display after the value (e.g., %, cases) |
Gauge
Visualizes the achievement rate of the current value relative to a target. A semi-circular gauge intuitively represents the current position.
- Achievement Rate Display: Visually represents the current value's position within a min–max range
- Target Value: Set a target line to check whether the goal has been met
| Setting | Required | Description |
|---|---|---|
| Value Field | ✅ | Numeric field and aggregation function |
| Min | Gauge minimum value (default: 0) | |
| Max | Gauge maximum value (default: 100) | |
| Target | Target line value |
BarChart
The most effective chart for comparing values across categories.
- Category Comparison: Place categories on the X-axis and values on the Y-axis to visually compare differences between items
- Stacked Mode: Stack multiple series to show each item's contribution to the total
| Setting | Required | Description |
|---|---|---|
| X-axis Field | ✅ | Field to map to the category axis |
| Y-axis Field | ✅ | Field and aggregation function to map to the value axis |
| Series | Field to group by (creates multiple series) | |
| Stacked Mode | Whether to enable stacked chart |
LineChart
Visualizes trends and changes in time-series data. Multiple lines allow simultaneous comparison of several series.
- Time-series Trends: Place a date/time field on the X-axis to show changes over time
- Multiple Lines: Display multiple metrics or groups as separate lines
| Setting | Required | Description |
|---|---|---|
| X-axis Field | ✅ | Time or continuous field |
| Y-axis Field | ✅ | Numeric field and aggregation function |
| Series | Field to group by (creates multiple lines) | |
| Show Points | Whether to show data point markers |
PieChart
Visualizes the proportion of each item relative to the whole. Useful for intuitively grasping composition ratios.
- Proportion Display: Show percentage values as labels on each slice
- Donut Mode: Option to display as a donut shape with an empty center
| Setting | Required | Description |
|---|---|---|
| Item Field | ✅ | Field representing the category |
| Value Field | ✅ | Numeric field and aggregation function |
| Variant | Pie or Donut | |
| Show Legend | Whether to display the legend | |
| Show Percentage | Whether to display percentage values on slices |
Heatmap
Represents value intensity using colors at the intersection of two dimensions. Suitable for identifying patterns and density visually.
- 2D Matrix: Expresses values as color intensity at the intersection of X-axis and Y-axis categories
- Color Scale: Choose between Sequential or Diverging color scales
| Setting | Required | Description |
|---|---|---|
| X-axis Field | ✅ | Horizontal axis category field |
| Y-axis Field | ✅ | Vertical axis category field |
| Value Field | ✅ | Numeric field to map to color intensity |
| Color Scale | Sequential or Diverging |
Map
Visualizes location-based data on a map. Displays data points as markers based on latitude/longitude coordinates.
- Coordinate-based: Map latitude and longitude fields to display points on the map
- Use cases: Regional revenue, store/sensor locations, route visualization
| Setting | Required | Description |
|---|---|---|
| Latitude Field | ✅ | Numeric field containing latitude values |
| Longitude Field | ✅ | Numeric field containing longitude values |
| Label Field | Field for marker labels | |
| Value Field | Numeric field to map to marker size/color |
DataTable
Displays data in a row-and-column table format. Use when detailed data viewing or sorting is needed.
- Sorting: Click column headers to sort ascending/descending
- Pagination: Split large datasets into pages for viewing
- Search: Filter data using the in-table search filter
| Setting | Required | Description |
|---|---|---|
| Data Source | ✅ | Dataset or SQL query to retrieve |
| Page Size | Number of rows to display per page (5, 10, 20, 50) | |
| Sortable | Whether to enable column sorting | |
| Searchable | Whether to enable search filter |
DateRangeSelector
Acts as a global date filter for the dashboard. The date range selected in this widget is automatically propagated to connected widgets.
- Date Range Filter: When the date range changes, all linked widgets are filtered to that period
- Presets: Quick selection options such as Last 7 days, Last 30 days
| Setting | Required | Description |
|---|---|---|
| Default Range | Initially selected range: Last 7 days, Last 30 days, Custom | |
| Allow Custom Range | Whether the user can select dates manually | |
| Display Format | YYYY-MM-DD, MM/DD/YYYY, DD.MM.YYYY |
It is recommended to place only one DateRangeSelector per dashboard. In query mode, use the $from and $to variables to apply date filters. For more details, refer to the Data Configuration documentation.
Upcoming Widgets
The following widget types will be added in future updates.
ScatterChart
Represents the relationship and distribution between two numeric variables as points on a 2D plane. Suitable for identifying correlations and outliers.
TextBox
Add descriptions, titles, or instructional text to the dashboard using free text or markdown.
IFrame
Embed external web pages or services within the dashboard. Integrate external monitoring tools, documents, reports, and more.
Widget Type Summary
| Widget | Category | Primary Use | Recommended Data |
|---|---|---|---|
| Statistic Card | Statistics | KPI emphasis | Single aggregated value |
| Gauge | Statistics | Achievement rate display | Single aggregated value + target |
| BarChart | Charts | Category comparison | Categorical + numeric |
| LineChart | Charts | Time-series trends | Temporal + numeric |
| PieChart | Charts | Composition ratio display | Categorical + numeric (5 or fewer items recommended) |
| Heatmap | Charts | Density/pattern | Categorical × categorical + numeric |
| Map | Charts | Location-based visualization | Latitude + longitude + numeric |
| DataTable | Tables | Detailed data viewing | Multi-field raw data |
| DateRangeSelector | Controls | Global date filter | None (filter only) |