Charts Component
Embed interactive charts with bar, line, pie, and other visualization types using the rb-chart web component.
Table of Contents
Overview
The <rb-chart> component renders interactive charts. It supports multiple visualization types including bar, line, pie, doughnut, area, and scatter charts.
FlowKraft Apps: The FlowKraft Frontend App has this component pre-configured. Just paste your embed code from the Usage tab—no script setup required. See FlowKraft Frontend App for details.
Basic Usage
<rb-chart
report-code="sales-trend"
api-base-url="http://localhost:9090/api/jobman/reporting"
style="height: 400px;">
</rb-chart>Tip: Set a height on the component for consistent sizing.
Attributes
| Attribute | Required | Description |
|---|---|---|
report-code | Yes | Report folder name configured in ReportBurster |
api-base-url | Yes | Base URL for API calls |
DSL Configuration
Chart configuration is defined in ReportBurster using a Groovy DSL.
Chart Types
| Type | Best For |
|---|---|
bar | Comparing values across categories |
line | Time series, trends |
pie | Part-to-whole relationships |
doughnut | Proportions with center content |
scatter | Correlations |
radar | Multi-dimensional comparison |
Basic Structure
chart {
type 'bar'
labelField 'month'
datasets {
dataset(field: 'revenue', label: 'Revenue', color: '#3b82f6')
}
}Dataset Properties Reference
| Property | Description | Example Values |
|---|---|---|
field | Data field for values | 'sales', 'revenue' |
label | Legend label | 'Monthly Sales' |
color | Line/bar color | '#3b82f6', 'rgba(59,130,246,0.5)' |
backgroundColor | Fill color | '#3b82f6' |
borderColor | Border color | '#1d4ed8' |
type | Override chart type | 'line', 'bar' |
fill | Fill area under line | true, false |
tension | Line curve tension | 0, 0.4 |
borderWidth | Line/border width | 1, 2 |
yAxisID | Secondary Y-axis | 'y1' |
Chart Options
chart {
type 'bar'
labelField 'month'
datasets {
dataset(field: 'revenue', label: 'Revenue', color: '#3b82f6')
}
options {
responsive true
plugins {
title { display true; text 'Monthly Revenue' }
legend { position 'top' }
}
}
}Examples
Bar Chart with Multiple Series
chart {
type 'bar'
labelField 'month'
datasets {
dataset(field: 'revenue', label: 'Revenue', color: '#3b82f6')
dataset(field: 'cost', label: 'Cost', color: '#ef4444')
}
options {
plugins {
title { display true; text 'Revenue vs Cost' }
}
}
}Line Chart with Trend
chart {
type 'line'
labelField 'date'
datasets {
dataset(field: 'sales', label: 'Daily Sales', color: '#10b981', tension: 0.3)
}
}Combo Chart (Bar + Line)
chart {
type 'bar'
labelField 'month'
datasets {
dataset(field: 'revenue', label: 'Revenue', color: '#3b82f6')
dataset(field: 'growth', label: 'Growth %', color: '#ef4444', type: 'line', yAxisID: 'y1')
}
options {
scales {
y1 { position 'right'; grid { drawOnChartArea false } }
}
}
}