Chart Reference
This is a setup guide for each widget type provided by the D.Hub dashboard. Knowing the characteristics and settings of each widget makes it easy to construct a visualization that suits your purpose. Widgets are grouped into categories Statistics Cards / Visualizations / Tables / Content / Controls in the widget library.
Statistic Card
There is a strong emphasis on single-number KPIs. Place it at the top of your dashboard to see key metrics at a glance.
- Single number KPI: Displays one large aggregate value (e.g. total sales, number of active users)
- Prefix/Suffix: Unit indication (e.g. $, ₩, %, case)
| Setting items | Required | Description |
|---|---|---|
| value field | ✅ | Numeric fields and aggregate functions |
| Prefix | Text to display before the value (e.g. $, ₩) | |
| Suffix | Text to display after value (e.g. %, number) | |
| Value Font Size | Three default sizes (Small 20px / Medium 28px / Large 40px) or enter directly (1–120px). Limited to a maximum of 120px to avoid encroaching on the margins even when the card fills the width and height |
KPI Gauge
It shows the achievement rate of the current value compared to the goal. A semicircular gauge intuitively indicates your current location.
- Achievement rate display: Visually displays the position of the current value within the minimum to maximum range
- Target value: Set a goal line and check whether it has been achieved
| Setting items | Required | Description |
|---|---|---|
| value field | ✅ | Numeric fields and aggregate functions |
| Minimum value (Min) | Gauge Minimum (Default: 0) | |
| Maximum value (Max) | Gauge Max (Default: 100) | |
| Target value | Target line display value |
Bar Chart
This is the most effective chart for comparing numbers by category.
- Comparison by Category: Visually compare differences between items by placing categories on the X-axis and numbers on the Y-axis.
- Accumulation mode: Accumulates multiple series to express the contribution of each item to the total
| Setting items | Required | Description |
|---|---|---|
| X-axis field | ✅ | Fields to map to category axis |
| Y axis field | ✅ | Fields and aggregate functions to map to the value axis |
| Series classification | Fields to group by (create multiple series) | |
| Stacked mode | Whether to enable stack chart |
Line Chart
Shows trends and changes in time series data. Draw multiple lines to compare multiple series at once.
- Time Series Trend: Place date/time fields on the X-axis to express changes over time
- Multiple Lines: Display multiple indicators or groups as separate lines
| Setting items | Required | Description |
|---|---|---|
| X-axis field | ✅ | time or continuous field |
| Y axis field | ✅ | Numeric fields and aggregate functions |
| Series classification | Fields to group by (create multiple lines) | |
| Show Points | Data point marker visibility |
Pie/Donut Chart
Visualize each item's proportion of the total. It is useful for intuitively understanding the composition ratio.
- Ratio display: Display percent value as a label on each slice
- Donut Mode: Can be displayed in a donut shape by leaving the center empty.
| Setting items | Required | Description |
|---|---|---|
| Item field | ✅ | Field representing category |
| value field | ✅ | Numeric fields and aggregate functions |
| Chart Type (Variant) | Pie or Donut | |
| Show Legend | Legend Visibility | |
| Show Percentage | Whether to display percent values in slices |
Heatmap
Colors represent the intensity of values at the intersection of two dimensions. Perfect for visualizing patterns and density.
- Two-dimensional matrix: Values expressed as color intensity at the intersection of X and Y axis categories
- Color Scale: Select Sequential or Diverging color scale
| Setting items | Required | Description |
|---|---|---|
| X-axis field | ✅ | Horizontal Category Field |
| Y axis field | ✅ | Vertical axis category field |
| value field | ✅ | Numeric field to map to color intensity |
Map
Visualize location-based data on maps. Displays data points as markers based on latitude/longitude coordinates.
- Coordinate-based: Maps Latitude and Longitude fields to display points on a map
- Use: Visualize sales by region, store or sensor locations, and movement routes.
| Setting items | Required | Description |
|---|---|---|
| latitude field | ✅ | Numeric field containing Latitude values |
| longitude field | ✅ | Numeric field containing Longitude values |
| label field | Label field to display on marker | |
| value field | Numeric field to map to marker size/color |
Scatter Chart
The relationship and distribution between two numerical variables are expressed as points on a two-dimensional plane. Ideal for identifying correlations and outliers.
Only numeric columns can be selected for the X-axis and Y-axis. The two axes determine the coordinates of the point.
| Setting items | Required | Description |
|---|---|---|
| X-axis field | ✅ | Horizontal axis — numeric column |
| Y axis field | ✅ | Vertical axis — numeric column |
| Size field (Size) | Expression of the third numeric variable normalized to the point size | |
| Color field (Color) | Numeric values are expressed as a color scale, and categorical values are expressed as group colors + legend | |
| Label field (Label) | Used as an identifier for the dot hover tooltip. If not selected, use widget title as tooltip title |
Data Table
Displays data in the form of a table of rows and columns. Use when you need to view detailed data or sort it.
- Sort: Sort in ascending/descending order by clicking on the column header
- Page division (pagination): When there is a lot of data, divide it into multiple pages and display it
- Search: Filter data with a search filter within the table.
| Setting items | Required | Description |
|---|---|---|
| data source | ✅ | Dataset or SQL query to query |
| 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 |
Markdown Text Box
Add descriptions, titles, and dividers to your dashboard using free text or Markdown. This is a content widget with no data source settings.
| Setting items | Required | Description |
|---|---|---|
| Markdown text | ✅ | Markdown (supports tables, checkboxes, and code blocks) |
External Site Embed
Insert the web page at the address http(s) into the dashboard. Only a URL is specified without setting a data source, and the inserted page opens in isolation (allowing forms, pop-ups, scripts, and same origin) and allows full screen.
| Setting items | Required | Description |
|---|---|---|
| URL | ✅ | Absolute URL of the page to embed (http/https) |
Some external sites do not allow insertion into other screens due to their own policies. In this case, you can open an external page by selecting Open in new tab in the widget action menu.
Date Range Selector
This is a DRS (Dashboard Range Selector) in the form of a widget placed on the dashboard canvas. It has the same operation as the global DRS above, and is useful for panel-type layouts that require separate controls.
| Setting items | Required | Description |
|---|---|---|
| Selection Type | Range (start and end two dates) or Single date (count up to the selected date, but search below that date) | |
| Default Range | Initially selected range: Last 7 days, Last 30 days, Custom (exposed only in Range format) | |
| Allow Custom Range | Whether the user can directly select the date (exposed only in Range format) | |
| Date Format (Display Format) | YYYY-MM-DD, MM/DD/YYYY, DD.MM.YYYY |
If the widget does not have an explicit time column/range, the value of the top DRS is automatically applied. In query mode (writing SQL directly), automatic inference is disabled, so apply the DRS range by specifying the Date Filter Column of the widget. For more information, refer to the Data Settings document.
Summary of widget types
| Widgets | Category | Main uses | Recommended Data |
|---|---|---|---|
| Stats Card | Stats Card | KPI emphasis | single aggregate value |
| KPI gauge | Stats Card | Display achievement rate | Single aggregate value + target |
| bar chart | Visualization | Comparison by Category | Categorical + Numerical |
| line chart | Visualization | Time Series Trend | time type + numeric type |
| Pie/Donut Chart | Visualization | Display composition ratio | Categorical + Numerical (5 or fewer items recommended) |
| heatmap | Visualization | Density/Pattern | Categorical × Categorical + Numerical |
| map | Visualization | Location-based visualization | latitude + longitude + numeric |
| Scatterplot | Visualization | Correlation/Outlier Analysis | Numeric type × Numeric type (+ color classification) |
| data table | table | Detailed data inquiry | Multi-field source data |
| text box | Content | Description/Section Header | None (content only) |
| Embed external site | Content | External site integration | None (URL) |
| Date range picker | control | global date filter | None (filter only) |