Chart Builder
Charts are reusable visualizations built on top of a dataset. Save one and embed it in any number of dashboards, or share it as a standalone view. 37 built-in types, all interactive and themeable.
Chart types
Kaveon ships 37 chart types across 18 categories, powered by Apache ECharts viaecharts-for-react — including the world map, which is rendered via ECharts plus the echarts-gl extension on the same ECharts instance.
| Category | Types |
|---|---|
| Line | Time-series line (+ share), multi-series line, area (+ share), stacked area |
| Bar | Vertical, horizontal, grouped, stacked (+ horizontal), mixed line+bar, waterfall |
| Pie | Pie, donut |
| Distribution | Scatter, bubble, heatmap, calendar heatmap, boxplot |
| Hierarchy | Treemap, sunburst, funnel, radar, gauge |
| Flow | Sankey, parallel coordinates, theme river |
| Map | World map (echarts-gl globe) |
| Custom / Table | Big number (+ trend), candlestick, pictorial bar, table, pivot table |
TEMPLATES in components/charts/ChartBuilderContext.tsx. New types can be added through the plugin registry without editing that file.Creating a chart
- Go to Charts → + New Chart.
- Pick a dataset — it determines the data source and schema.
- Choose a chart type from the picker (categories left, thumbnails right, searchable).
- In the Configure tab, drag dimensions onto the X / group-by slots and metrics onto the Y slots; add filters and a date range.
- Click Run to preview.
- Tune the Customize tab (colors, labels, axes, legend), then Save Chart.
The builder interface
Column browser
Lists every column and metric from the dataset, tagged as dimensions (string, date) or measures (numeric). Drag a column into a slot, or click to assign it.
Customize options
| Option | What it controls |
|---|---|
| Title | Text, font, size |
| Color palette | 12-color default or a custom hex list |
| Legend / Tooltip | Visibility, position, number format, decimals, separators |
| X / Y axis | Labels, visibility, date & number formats |
| Series | Smooth lines, markers, stacking |
| Show as percentage | Normalize stacked charts to 100% |
ECharts integration
Charts render client-side with ReactECharts. Before an option object is handed to ECharts, it’s run through applyChartTheme (utils/echartsTheme.ts), which injects theme-aware colors for text, legend, tooltip, axes, and split lines — so every chart respects light/dark mode automatically.
import { applyChartTheme } from "../../utils/echartsTheme";
const option = applyChartTheme(buildEChartsOptions(/* … */), isDark);
return <ReactECharts option={option} style={{ height: 400 }} notMerge lazyUpdate />;