Components / Charts
Treemap and radar
A treemap shows the parts of a whole as rectangles sized by value. A radar chart compares items across several axes.
Functions: cui_radar_chart, cui_treemap
Usage
static const cui_viz_item mods[] = { { "Layout", 55 }, { "Text", 42 }, { "Draw", 35 } /* ... */ };
cui_treemap(ui, "bundle", mods, 10, .height = 290, .format = "%.0f KB");
cui_series releases[] = { { "1.0", a, 6 }, { "1.1", b, 6 } };
cui_radar_chart(ui, "radar", releases, 2, axes, 6, .size = 210, .max = 100);The treemap uses a squarified layout, so rectangles stay close to square; labels appear where they fit and the text color follows the fill. Give an item a color to pick it out. The radar draws a ring per tick with its value, fills each series lightly and lists them in a legend; hovering near an axis shows every series' value on it.
Options of cui_radar_chart
| Option | Type | Default | Description |
|---|---|---|---|
.size | float | Size in points; 0 uses the component's own. | |
.max | float | value at the outer ring; 0 picks a round number above the largest value | |
.format | const char * | A printf format for the values, such as "%.0f ms". | |
.no_legend | bool | Hides the legend. |
Options of cui_treemap
| Option | Type | Default | Description |
|---|---|---|---|
.width | cui_size | Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own. | |
.height | float | Height in points; 0 uses the component's own. | |
.format | const char * | A printf format for the values, such as "%.0f ms". |
cui_series
| Field | Type | Description |
|---|---|---|
name | const char * | shown in the legend and in the hover tooltip |
values | const float * | the series' data, one value per point |
count | int | number of values |
color | cui_color | default: series palette |
cui_viz_item
| Field | Type | Description |
|---|---|---|
label | const char * | A label shown above or beside the control. |
value | float | the item's amount: its area, length or share, by chart (activity rings: 1 is a full turn) |
color | cui_color | A theme color such as CUI_COLOR_ACCENT, or CUI_RGB(0x7747ff); unset uses the theme's. |
Related
- Funnel, split bar and waffle: Three charts for shares: a funnel for the steps of a conversion, a single bar split into parts, and a waffle of 100 squares.
- Calendar heatmap: A year of days as small squares colored by activity.
- Sankey: Flows between stages, drawn as ribbons whose width follows the amount.
- Heatmap: A grid of cells colored by value, for one category against another.