Bar Chart Widget¶
Overview¶
The Bar Chart widget displays multi-bar data in either vertical (column) or horizontal (row) orientation. It supports per-bar colors, labels, value overlays, grid lines, and a chart title.
Enable¶
Creation¶
#ifdef MGUI_WIDGET_ENABLE_BAR_CHART
mgui_widget_t* chart = mgui_allocate_widget(
parent,
MGUI_WIDGET_BAR_CHART,
(mgui_area_t){x, y, width, height},
MGUI_COLOR_WHITE
);
mgui_widget_bar_chart_set_num_bars(chart, num_bars);
mgui_widget_bar_chart_set_orientation(chart, BAR_CHART_VERTICAL);
#endif
API Reference¶
Configuration¶
// Number of bars (call immediately after creation)
mgui_widget_bar_chart_set_num_bars(chart, num_bars);
// Orientation
mgui_widget_bar_chart_set_orientation(chart, BAR_CHART_VERTICAL); // columns
mgui_widget_bar_chart_set_orientation(chart, BAR_CHART_HORIZONTAL); // rows
Data¶
// Set all bar values at once
mgui_widget_bar_chart_set_values(chart, const int16_t* values, int16_t count);
// Set value range (min / max)
mgui_widget_bar_chart_set_range(chart, int16_t min_value, int16_t max_value);
Appearance¶
// Per-bar fill color
mgui_widget_bar_chart_set_bar_color(chart, int16_t index, mgui_color_t color);
// Bar width in pixels (applies to all bars)
mgui_widget_bar_chart_set_bar_width(chart, int16_t width);
// Chart title string
mgui_widget_bar_chart_set_title(chart, const char* title);
Labels¶
// Per-bar axis label
mgui_widget_bar_chart_set_bar_label(chart, int16_t index, const char* label);
// Show / hide all bar labels
mgui_widget_bar_chart_show_labels(chart, bool show);
Grid¶
Value Display¶
| Mode | Description |
|---|---|
BAR_CHART_VALUE_NONE |
No value text |
BAR_CHART_VALUE_ON_BAR |
Value drawn on the bar |
BAR_CHART_VALUE_ABOVE_BAR |
Value drawn above / beside the bar |
Examples¶
Monthly Sales Chart¶
#ifdef MGUI_WIDGET_ENABLE_BAR_CHART
mgui_widget_t* chart = mgui_allocate_widget(screen, MGUI_WIDGET_BAR_CHART,
(mgui_area_t){10, 10, 300, 200}, MGUI_COLOR_WHITE);
mgui_widget_bar_chart_set_num_bars(chart, 12);
mgui_widget_bar_chart_set_orientation(chart, BAR_CHART_VERTICAL);
const int16_t sales[] = {45, 52, 48, 61, 55, 70, 65, 58, 63, 72, 68, 75};
mgui_widget_bar_chart_set_values(chart, sales, 12);
const char* months[] = {"Jan","Feb","Mar","Apr","May","Jun",
"Jul","Aug","Sep","Oct","Nov","Dec"};
for (int i = 0; i < 12; i++)
mgui_widget_bar_chart_set_bar_label(chart, i, months[i]);
mgui_widget_bar_chart_set_range(chart, 0, 100);
mgui_widget_bar_chart_show_labels(chart, true);
mgui_widget_bar_chart_show_grid(chart, true);
mgui_widget_bar_chart_set_value_mode(chart, BAR_CHART_VALUE_ABOVE_BAR);
mgui_widget_bar_chart_set_title(chart, "Monthly Sales");
#endif
Horizontal Task Progress¶
#ifdef MGUI_WIDGET_ENABLE_BAR_CHART
mgui_widget_t* chart = mgui_allocate_widget(screen, MGUI_WIDGET_BAR_CHART,
(mgui_area_t){10, 10, 300, 200}, MGUI_COLOR_WHITE);
mgui_widget_bar_chart_set_num_bars(chart, 5);
mgui_widget_bar_chart_set_orientation(chart, BAR_CHART_HORIZONTAL);
const int16_t progress[] = {100, 75, 50, 25, 10};
mgui_widget_bar_chart_set_values(chart, progress, 5);
const char* tasks[] = {"UI Design", "Backend", "Testing", "Docs", "Deploy"};
mgui_color_t colors[] = {
MGUI_COLOR_GREEN, MGUI_COLOR_CYAN, MGUI_COLOR_YELLOW,
MGUI_COLOR_ORANGE, MGUI_COLOR_RED
};
for (int i = 0; i < 5; i++) {
mgui_widget_bar_chart_set_bar_label(chart, i, tasks[i]);
mgui_widget_bar_chart_set_bar_color(chart, i, colors[i]);
}
mgui_widget_bar_chart_set_range(chart, 0, 100);
mgui_widget_bar_chart_show_labels(chart, true);
mgui_widget_bar_chart_set_value_mode(chart, BAR_CHART_VALUE_ON_BAR);
mgui_widget_bar_chart_set_bar_width(chart, 28);
#endif
Real-Time CPU History¶
#ifdef MGUI_WIDGET_ENABLE_BAR_CHART
static mgui_widget_t* cpu_chart = NULL;
void init_cpu_chart(mgui_widget_t* parent) {
cpu_chart = mgui_allocate_widget(parent, MGUI_WIDGET_BAR_CHART,
(mgui_area_t){10, 10, 300, 150}, MGUI_COLOR_WHITE);
mgui_widget_bar_chart_set_num_bars(cpu_chart, 16);
mgui_widget_bar_chart_set_orientation(cpu_chart, BAR_CHART_VERTICAL);
mgui_widget_bar_chart_set_range(cpu_chart, 0, 100);
mgui_widget_bar_chart_show_grid(cpu_chart, true);
mgui_widget_bar_chart_set_title(cpu_chart, "CPU %");
}
void update_cpu(uint8_t cpu_percent) {
static int16_t history[16] = {0};
for (int i = 0; i < 15; i++) history[i] = history[i + 1];
history[15] = cpu_percent;
mgui_widget_bar_chart_set_values(cpu_chart, history, 16);
for (int i = 0; i < 16; i++) {
mgui_color_t c = (history[i] < 50) ? MGUI_COLOR_GREEN :
(history[i] < 80) ? MGUI_COLOR_YELLOW : MGUI_COLOR_RED;
mgui_widget_bar_chart_set_bar_color(cpu_chart, i, c);
}
}
#endif
Common Combinations¶
| Use Case | Pairing |
|---|---|
| Sensor dashboard | Bar chart + Label widget for live readings |
| KPI screen | Bar chart + title + grid enabled |
| Progress tracker | Horizontal bars + per-bar colors |
| Real-time monitor | Bar chart + periodic set_values call |
Examples¶
Vertical Bar Chart¶
Monthly sales data — 12 bars, value above each bar, grid enabled.
{
"elements": [
{
"type": "box",
"name": "Screen",
"x": 0, "y": 0, "w": 320, "h": 240,
"color": "0x5900CC",
"children": [
{
"type": "bar_chart",
"name": "SalesChart",
"x": 10, "y": 10, "w": 300, "h": 200,
"color": "0xFFFFFF",
"num_bars": 12,
"orientation": "vertical",
"values": [45, 52, 48, 61, 55, 70, 65, 58, 63, 72, 68, 75],
"bar_labels": ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
"range": { "min": 0, "max": 100 },
"show_labels": true,
"show_grid": true,
"value_mode": "above_bar",
"title": "Monthly Sales"
}
]
}
]
}
mgui_widget_t* screen = mgui_allocate_widget(
NULL, MGUI_WIDGET_BOX,
(mgui_area_t){0, 0, 320, 240},
MGUI_COLOR_LIGHT_GRAY);
#ifdef MGUI_WIDGET_ENABLE_BAR_CHART
mgui_widget_t* chart = mgui_allocate_widget(
screen, MGUI_WIDGET_BAR_CHART,
(mgui_area_t){10, 10, 300, 200},
MGUI_COLOR_WHITE);
mgui_widget_bar_chart_set_num_bars(chart, 12);
mgui_widget_bar_chart_set_orientation(chart, BAR_CHART_VERTICAL);
const int16_t sales[] = {45, 52, 48, 61, 55, 70, 65, 58, 63, 72, 68, 75};
mgui_widget_bar_chart_set_values(chart, sales, 12);
const char* months[] = {"Jan","Feb","Mar","Apr","May","Jun",
"Jul","Aug","Sep","Oct","Nov","Dec"};
for (int i = 0; i < 12; i++)
mgui_widget_bar_chart_set_bar_label(chart, i, months[i]);
mgui_widget_bar_chart_set_range(chart, 0, 100);
mgui_widget_bar_chart_show_labels(chart, true);
mgui_widget_bar_chart_show_grid(chart, true);
mgui_widget_bar_chart_set_value_mode(chart, BAR_CHART_VALUE_ABOVE_BAR);
mgui_widget_bar_chart_set_title(chart, "Monthly Sales");
#endif
Horizontal Task Progress¶
Five colored horizontal bars — per-bar colors, value drawn on each bar.
{
"elements": [
{
"type": "box",
"name": "Screen",
"x": 0, "y": 0, "w": 320, "h": 240,
"color": "0xC6C6C6",
"children": [
{
"type": "bar_chart",
"name": "TaskProgress",
"x": 10, "y": 10, "w": 300, "h": 200,
"color": "0xFFFFFF",
"num_bars": 5,
"orientation": "horizontal",
"values": [100, 75, 50, 25, 10],
"bar_labels": ["UI Design", "Backend", "Testing", "Docs", "Deploy"],
"bar_colors": [
{ "index": 0, "color": "0x07E0" },
{ "index": 1, "color": "0x07FF" },
{ "index": 2, "color": "0xFFE0" },
{ "index": 3, "color": "0xFD20" },
{ "index": 4, "color": "0xF800" }
],
"range": { "min": 0, "max": 100 },
"show_labels": true,
"value_mode": "on_bar",
"bar_width": 28
}
]
}
]
}
mgui_widget_t* screen = mgui_allocate_widget(
NULL, MGUI_WIDGET_BOX,
(mgui_area_t){0, 0, 320, 240},
MGUI_COLOR_LIGHT_GRAY);
#ifdef MGUI_WIDGET_ENABLE_BAR_CHART
mgui_widget_t* chart = mgui_allocate_widget(
screen, MGUI_WIDGET_BAR_CHART,
(mgui_area_t){10, 10, 300, 200},
MGUI_COLOR_WHITE);
mgui_widget_bar_chart_set_num_bars(chart, 5);
mgui_widget_bar_chart_set_orientation(chart, BAR_CHART_HORIZONTAL);
const int16_t progress[] = {100, 75, 50, 25, 10};
mgui_widget_bar_chart_set_values(chart, progress, 5);
const char* tasks[] = {"UI Design", "Backend", "Testing", "Docs", "Deploy"};
mgui_color_t colors[] = {
MGUI_COLOR_GREEN, MGUI_COLOR_CYAN, MGUI_COLOR_YELLOW,
MGUI_COLOR_ORANGE, MGUI_COLOR_RED
};
for (int i = 0; i < 5; i++) {
mgui_widget_bar_chart_set_bar_label(chart, i, tasks[i]);
mgui_widget_bar_chart_set_bar_color(chart, i, colors[i]);
}
mgui_widget_bar_chart_set_range(chart, 0, 100);
mgui_widget_bar_chart_show_labels(chart, true);
mgui_widget_bar_chart_set_value_mode(chart, BAR_CHART_VALUE_ON_BAR);
mgui_widget_bar_chart_set_bar_width(chart, 28);
#endif
Per-Bar Color (Temperature)¶
24-hour temperature chart — color coded by range: blue (cold) → green → orange → red (hot).
{
"elements": [
{
"type": "box",
"name": "Screen",
"x": 0, "y": 0, "w": 320, "h": 240,
"color": "0xC6C6C6",
"children": [
{
"type": "bar_chart",
"name": "TempChart",
"x": 10, "y": 10, "w": 300, "h": 200,
"color": "0xFFFFFF",
"num_bars": 12,
"orientation": "vertical",
"values": [18, 19, 21, 23, 25, 27, 29, 31, 30, 26, 22, 19],
"bar_colors": [
{ "index": 0, "color": "0x001F" },
{ "index": 1, "color": "0x001F" },
{ "index": 2, "color": "0x07E0" },
{ "index": 3, "color": "0x07E0" },
{ "index": 4, "color": "0x07E0" },
{ "index": 5, "color": "0xFD20" },
{ "index": 6, "color": "0xFD20" },
{ "index": 7, "color": "0xF800" },
{ "index": 8, "color": "0xF800" },
{ "index": 9, "color": "0xFD20" },
{ "index": 10, "color": "0x07E0" },
{ "index": 11, "color": "0x001F" }
],
"range": { "min": 0, "max": 40 },
"show_grid": true,
"title": "24h Temperature (°C)"
}
]
}
]
}
mgui_widget_t* screen = mgui_allocate_widget(
NULL, MGUI_WIDGET_BOX,
(mgui_area_t){0, 0, 320, 240},
MGUI_COLOR_LIGHT_GRAY);
#ifdef MGUI_WIDGET_ENABLE_BAR_CHART
mgui_widget_t* chart = mgui_allocate_widget(
screen, MGUI_WIDGET_BAR_CHART,
(mgui_area_t){10, 10, 300, 200},
MGUI_COLOR_WHITE);
mgui_widget_bar_chart_set_num_bars(chart, 12);
mgui_widget_bar_chart_set_orientation(chart, BAR_CHART_VERTICAL);
mgui_widget_bar_chart_set_range(chart, 0, 40);
mgui_widget_bar_chart_show_grid(chart, true);
mgui_widget_bar_chart_set_title(chart, "24h Temperature (°C)");
const int16_t temps[] = {18, 19, 21, 23, 25, 27, 29, 31, 30, 26, 22, 19};
mgui_widget_bar_chart_set_values(chart, temps, 12);
for (int i = 0; i < 12; i++) {
mgui_color_t c;
if (temps[i] < 20) c = MGUI_COLOR_BLUE;
else if (temps[i] < 25) c = MGUI_COLOR_GREEN;
else if (temps[i] < 30) c = MGUI_COLOR_ORANGE;
else c = MGUI_COLOR_RED;
mgui_widget_bar_chart_set_bar_color(chart, i, c);
}
#endif